/* ===================================================================
   BIZAURA COLLEGE DESIGN SYSTEM - TOKENS & VARIABLES
   Near-black canvas, graphite surfaces, vivid ruby crimson accents
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Syne:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Canvas Backgrounds */
  --bg-black: #050507;
  --bg-canvas: #09090D;
  --bg-canvas-subtle: #0E0E14;
  --bg-surface-1: #13131A;
  --bg-surface-2: #181822;
  --bg-surface-3: #20202E;
  --bg-surface-glass: rgba(18, 18, 25, 0.75);
  --bg-surface-elevated: #242436;

  /* Ruby Crimson Accents (Derived from BizAura Logo) */
  --accent-red-pure: #E50914;
  --accent-red-bright: #FF2438;
  --accent-red-glow: rgba(229, 9, 20, 0.35);
  --accent-red-subtle: rgba(229, 9, 20, 0.12);
  --accent-red-dark: #99000B;
  --accent-red-gradient: linear-gradient(135deg, #FF2E3F 0%, #E50914 55%, #A8000C 100%);
  --accent-red-metallic: linear-gradient(180deg, #FF4554 0%, #E50914 60%, #800008 100%);

  /* Cool Silver & Metallic Grays */
  --metallic-silver-light: #F1F5F9;
  --metallic-silver: #CBD5E1;
  --metallic-silver-dark: #64748B;
  --gunmetal-dark: #1E222B;
  --gunmetal-border: rgba(255, 255, 255, 0.08);
  --gunmetal-border-hover: rgba(229, 9, 20, 0.4);
  --gunmetal-border-active: rgba(255, 255, 255, 0.2);

  /* Typography Colors */
  --text-primary: #FFFFFF;
  --text-secondary: #CBD5E1;
  --text-muted: #8E9BAE;
  --text-dim: #525E75;
  --text-accent: #FF3B4D;

  /* Status Colors */
  --status-success: #10B981;
  --status-success-bg: rgba(16, 185, 129, 0.12);
  --status-warning: #F59E0B;
  --status-warning-bg: rgba(245, 158, 11, 0.12);
  --status-info: #3B82F6;
  --status-info-bg: rgba(59, 130, 246, 0.12);
  --status-danger: #EF4444;
  --status-danger-bg: rgba(239, 68, 68, 0.12);

  /* Fonts */
  --font-display: 'Syne', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography Scales */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.85);
  --shadow-red: 0 8px 30px rgba(229, 9, 20, 0.35);
  --shadow-red-lg: 0 12px 45px rgba(229, 9, 20, 0.45);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Layout Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Transitions & Animation */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout Widths */
  --container-max: 1320px;
  --container-narrow: 1040px;
  --header-height: 80px;
  --announcement-height: 38px;
}