/*
 * DESIGN TOKENS — Single source of truth
 * Values extracted directly from Figma: LJorLc8uxUuVkGQzpDbW3w
 * DO NOT hardcode these values anywhere else in the codebase.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {

  /* ── COLORS ── */

  /* Brand primary — exact values from Figma design system */
  --color-darkblue:      #00144B;
  --color-lightblue:     #003189;
  --color-darkorange:    #EE4023;
  --color-lightorange:   #F9A533;
  --color-orange:        #EE6A23;

  /* Neutral */
  --color-ink:           #1A1A18;
  --color-white:         #FFFFFF;
  --color-off-white:     #F8F7F4;
  --color-gray-100:      #F0EEE9;
  --color-gray-400:      #AAAAAA;
  --color-gray-700:      #444444;
  --color-rule:          #E3E1DC;

  /* White overlays (on dark backgrounds) — from Figma */
  --color-white-1:       rgba(255, 255, 255, 0.01);
  --color-white-4:       rgba(255, 255, 255, 0.04);
  --color-white-12:      rgba(255, 255, 255, 0.12);
  --color-white-20:      rgba(255, 255, 255, 0.20);
  --color-white-40:      rgba(255, 255, 255, 0.40);
  --color-white-60:      rgba(255, 255, 255, 0.60);
  --color-white-80:      rgba(255, 255, 255, 0.80);
  --color-white-90:      rgba(255, 255, 255, 0.90);

  /* Dark overlays */
  --color-darkblue-12:   rgba(0, 20, 75, 0.12);
  --color-black-2:       rgba(0, 0, 0, 0.02);
  --color-black-4:       rgba(0, 0, 0, 0.04);

  /* Gradients */
  --grad-navy:     linear-gradient(-87.53deg, var(--color-darkblue) 0%, var(--color-lightblue) 100%);
  --grad-orange:   linear-gradient(24.86deg, var(--color-darkorange) 0%, var(--color-lightorange) 100%);
  --grad-glass:    linear-gradient(90.57deg, var(--color-white-80) 0%, var(--color-white-90) 50%, var(--color-white-80) 100%);
  --grad-footer-card: linear-gradient(152.59deg, var(--color-white-4) 14.99%, var(--color-white-1) 50%, var(--color-white-4) 85.01%);

  /* ── TYPOGRAPHY ── */

  /* Font families */
  --font-head:  'Montserrat', sans-serif;
  --font-body:  'Inter', sans-serif;

  /* Font sizes — Figma exact values */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   96px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-head:    1.1;
  --lh-sub:     1.2;
  --lh-nav:     20px;   /* nav items: 16px / 20px */
  --lh-body:    1.6;
  --lh-para:    24px;   /* paragraph: 16px / 24px */
  --lh-para-lg: 32px;   /* paragraph big: 20px / 32px */
  --lh-label:   16px;   /* small: 14px / 16px */

  /* Font weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ── SPACING — 4px base grid ── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ── LAYOUT ── */

  --max-width:       1920px;
  --content-width:   1280px;
  --pad-x:           80px;   /* Desktop margin — from Figma: --desktop(1920)/margin */
  --pad-x-mobile:    20px;
  --section-gap:     40px;   /* --desktop(1920)/section_gap */
  --section-margin:  120px;  /* --desktop(1920)/section_margin-large-50%: 120px */
  --col-gap:         40px;   /* --desktop(1920)/gap */

  /* ── BORDERS ── */

  --radius-xs:  2px;   /* --border/small */
  --radius-sm:  4px;   /* --border/default */
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* ── SHADOWS ── */

  --shadow-btn:    0px 8px 12px rgba(0, 0, 0, 0.04);
  --shadow-btn-sm: 0px 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-nav:    0px 12px 20px rgba(0, 0, 0, 0.02);

  /* ── TRANSITIONS ── */

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  0.15s;
  --dur-base:  0.25s;
  --dur-slow:  0.4s;

  /* ── BREAKPOINTS (for JS reference) ── */
  --bp-sm:   390px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;

  /* ── NAVBAR HEIGHTS ── */
  --navbar-h:        88px;
  --navbar-h-sticky: 60px;
  --navbar-h-mobile: 64px;

  /* ── EXTRA COLORS (from page sections) ── */
  --color-whiteblue:    #F9FBFF;       /* light section bg — Figma: --color/whiteblue */
  --color-black:        #111111;       /* card title text */
  --color-black-80:     rgba(17, 17, 17, 0.80);
  --color-darkblue-20:  rgba(0, 20, 75, 0.20); /* section dividers */

  /* ── SECTION GAPS (from Figma spacing tokens) ── */
  --section-gap-lg:     60px;   /* --desktop(1920)/section_gap-large */
  --section-margin-lg:  160px;  /* --desktop(1920)/section_margin-large */

  /* ── TYPOGRAPHY SCALE (Figma exact — desktop 1920) ── */
  --text-h1:    60px;    /* Desktop/Heading 1: 60/72 */
  --lh-h1:      72px;
  --text-h2:    48px;    /* Desktop/Heading 2: 48/56 */
  --lh-h2:      56px;
  --text-h3:    32px;    /* Desktop/Heading 3: 32/40 */
  --lh-h3:      40px;
  --text-h4:    20px;    /* Desktop/Heading 4: 20/24 */
  --lh-h4:      24px;
  --text-subtitle: 18px; /* Desktop/SubTitle: 18/24 */
  --lh-subtitle:  24px;

  /* ── GLOW EFFECT (hero heading, framework cards) ── */
  --glow-blue: 0px 12px 20px rgba(0,0,0,0.12),
               0px 0px 40px rgba(138,213,238,0.10),
               0px 0px 20px rgba(138,213,238,0.20),
               0px 0px 4px  rgba(138,213,238,0.40),
               0px 0px 1px  rgba(138,213,238,0.80);
}