/* tokens.css — All CSS custom properties (design tokens) */
:root {

  /* ── BRAND CORE ─────────────────────────────────────────── */
  --clr-midnight:      #0A0F1E;
  --clr-navy:          #0F1E3A;
  --clr-navy-light:    #1E3560;
  --clr-navy-border:   #243B6B;

  /* ── ACCENT: GOLD ────────────────────────────────────────── */
  --clr-gold:          #D4A847;
  --clr-gold-bright:   #F0C040;
  --clr-gold-muted:    #A8852E;
  --clr-gold-glow:     rgba(212,168,71,0.15);
  --clr-gold-line:     rgba(212,168,71,0.30);

  /* ── URGENCY: RED ────────────────────────────────────────── */
  --clr-red:           #E53935;
  --clr-red-dark:      #C62828;
  --clr-red-surface:   rgba(229,57,53,0.10);

  /* ── LIGHT SURFACES ──────────────────────────────────────── */
  --clr-white:         #FFFFFF;
  --clr-surface-1:     #F7F8FC;
  --clr-surface-2:     #EFF1F7;
  --clr-border-light:  #D8DCE9;

  /* ── TEXT ────────────────────────────────────────────────── */
  --clr-text-dark:     #0D1526;
  --clr-text-body:     #2E3A52;
  --clr-text-muted:    #3D4A62;
  --clr-text-white:    #FFFFFF;
  --clr-text-white-80: rgba(255,255,255,0.82);
  --clr-text-white-55: rgba(255,255,255,0.55);

  /* ── TYPOGRAPHY ───────────────────────────────────────────── */
  --font-display: 'Segoe UI Black', 'Helvetica Neue', 'Arial Black',
                  -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.375rem;
  --text-5xl: 3.25rem;
  --text-6xl: 4.25rem;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --ls-tight:   -0.02em;
  --ls-wide:     0.05em;
  --ls-wider:    0.10em;
  --ls-widest:   0.15em;

  /* ── SPACING ──────────────────────────────────────────────── */
  --sp-0-5: 0.125rem;
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-32:  8rem;

  /* ── BORDER RADIUS ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── SHADOWS ──────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(15,30,58,0.08), 0 1px 2px rgba(15,30,58,0.04);
  --shadow-md:   0 4px 16px rgba(15,30,58,0.10), 0 2px 4px rgba(15,30,58,0.06);
  --shadow-lg:   0 12px 32px rgba(15,30,58,0.12), 0 4px 8px rgba(15,30,58,0.06);
  --shadow-2xl:  0 40px 96px rgba(15,30,58,0.20), 0 16px 32px rgba(15,30,58,0.10);
  --shadow-gold: 0 0 0 1px var(--clr-gold-line),
                 0 8px 32px rgba(212,168,71,0.20),
                 0 2px 8px rgba(212,168,71,0.10);
  --shadow-red:  0 0 0 1px rgba(229,57,53,0.40),
                 0 8px 32px rgba(229,57,53,0.25),
                 0 2px 8px rgba(229,57,53,0.15);

  /* ── TRANSITIONS ──────────────────────────────────────────── */
  --ease-fast:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:   0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow:   0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --header-h:      76px;
  --header-h-sm:   60px;

  /* ── Z-INDEX ──────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   300;
  --z-modal:    500;
  --z-skip:     9999;
}