/* =============================================================================
   tokens.css — VBS Design System Tokens
   All CSS custom properties. Import this first.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     Colour Palette
     Light-primary theme: navy-on-white, gold accents, reduced glows.
  --------------------------------------------------------------------------- */

  /* ── BACKGROUNDS ── */
  --color-bg:         #F7F8FA;   /* Page background — off-white */
  --color-surface:    #FFFFFF;   /* Card and panel backgrounds */
  --color-surface-2:  #EEF0F4;   /* Subtle alternating section background */
  --color-navy:       #001F4D;   /* Deep navy — primary text and dark sections */
  --color-navy-mid:   #003070;   /* Mid navy — hover states, secondary dark elements */

  /* ── ACCENT COLOURS ── */
  --color-gold:       #C9A84C;   /* Primary accent — borders, CTAs, highlights */
  --color-gold-light: rgba(201,168,76,0.12);   /* Tint for hover backgrounds */
  --color-gold-20:    rgba(201,168,76,0.2);    /* Subtle borders */
  --color-cyan:       #0077B6;   /* Professional mid-blue — tech tags and AI Brief tool */

  /* ── TEXT ── */
  --color-text:       #0D1B2A;   /* Primary text — near black */
  --color-text-sec:   #4A5568;   /* Secondary text — medium grey */
  --color-text-muted: #8A96A3;   /* Muted labels and metadata */
  --color-cream:      #0D1B2A;   /* Remapped to dark text for light theme */

  /* ── BORDERS ── */
  --color-border:      rgba(0,31,77,0.1);    /* Subtle borders on light background */
  --color-border-gold: rgba(201,168,76,0.3); /* Gold accent borders */

  /* Derived alpha variants */
  --color-gold-35:  rgba(201,168,76,0.35);
  --color-gold-40:  rgba(201,168,76,0.4);
  --color-cyan-10:  rgba(0,119,182,0.1);
  --color-cyan-30:  rgba(0,119,182,0.3);

  /* ---------------------------------------------------------------------------
     Typography — Font Families
  --------------------------------------------------------------------------- */

  --font-display:  'Rajdhani', sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* ---------------------------------------------------------------------------
     Type Scale
  --------------------------------------------------------------------------- */

  --text-hero:   clamp(2.5rem, 5.5vw, 5.5rem);  /* Hero H1 — Rajdhani 700 */
  --text-h1:     clamp(1.8rem, 3.5vw, 3.5rem);  /* Section titles — Rajdhani 600 */
  --text-h2:     clamp(1.4rem, 2.5vw, 2.2rem);  /* Sub-section — Rajdhani 500 */
  --text-h3:     1.1rem;                          /* Card titles — Rajdhani 600 */
  --text-body:   1rem;                         /* Body — Inter 400 */
  --text-small:  0.875rem;                     /* Secondary text — Inter 400 */
  --text-label:  0.7rem;                       /* All-caps labels — JetBrains Mono */

  /* ---------------------------------------------------------------------------
     Spacing Scale
  --------------------------------------------------------------------------- */

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Section vertical padding — desktop default */
  --section-pad: 10rem;

  /* ---------------------------------------------------------------------------
     Layout
  --------------------------------------------------------------------------- */

  --max-width:      1400px;
  --grid-columns:   12;
  --gutter:         2rem;
  --gutter-wide:    4rem;
  --border-radius:  4px;   /* Max on inputs and small UI — zero on hard-edged elements */

  /* ---------------------------------------------------------------------------
     Glow & Depth Effects
     Use these consistently to maintain the digital-not-flat aesthetic.
  --------------------------------------------------------------------------- */

  /* ── GLOWS — reduced intensity for light theme ── */
  --glow-gold:  0 2px 12px rgba(201,168,76,0.2);

  --glow-gold-intense:
    0 0 20px rgba(201,168,76,0.4),
    0 0 60px rgba(201,168,76,0.15);

  --glow-cyan:  0 2px 12px rgba(0,119,182,0.15);

  --glow-cyan-intense:
    0 0 20px rgba(0,119,182,0.3),
    0 0 60px rgba(0,119,182,0.1);

  --text-glow-gold:  0 0 40px rgba(201,168,76,0.4);

  /* ── CARDS ── */
  --card-bg:     #FFFFFF;
  --card-border: 1px solid rgba(0,31,77,0.1);

  /* ── GLOW-CARD — gentle card lift on light background ── */
  --glow-card: 0 4px 24px rgba(0,0,0,0.06);

  /* ---------------------------------------------------------------------------
     Animation Timing
  --------------------------------------------------------------------------- */

  --transition-fast:    0.2s ease;
  --transition-base:    0.3s ease;
  --transition-reveal:  0.6s ease-out;
  --stagger-step:       0.08s;

  /* ---------------------------------------------------------------------------
     Z-Index Scale
  --------------------------------------------------------------------------- */

  --z-canvas:   0;
  --z-content:  10;
  --z-nav:      100;
  --z-panel:    200;
  --z-overlay:  300;
}