/* ==========================================================================
   TOKENS — single source of truth
   Palette derived from the original logo (sampled pixel evidence):
   blue #304878 / #3D4B78, deep red #900000, chrome silver #C0C0C0
   ========================================================================== */

:root {
  /* ---- Brand core ---- */
  --navy-950: #060B18;   /* page base */
  --navy-900: #0A1124;   /* deep sections */
  --navy-850: #0D1730;   /* raised dark surface */
  --navy-800: #14203F;   /* card on dark */
  --navy-700: #1D2C52;   /* borders on dark */
  --navy-600: #2A3A63;
  --brand-blue: #3D4B78; /* INHERITED from the original template token */
  --brand-blue-lt: #55689E;
  --brand-blue-xlt: #8598C9;

  /* ---- Accent (logo red, tuned for AA on dark) ---- */
  --crimson: #C8102E;
  --crimson-lt: #E63950;
  --crimson-dk: #900000;  /* raw logo red */

  /* ---- Chrome / metal (the luxury cue, from logo silver) ---- */
  --chrome-100: #F2F4F8;
  --chrome-300: #C8CEDA;
  --chrome-500: #94A0B8;

  /* ---- Light surfaces ---- */
  --mist: #F4F6FB;
  --mist-dk: #E7EBF3;
  --white: #FFFFFF;

  /* ---- Text ---- */
  --ink: #0B1220;
  --ink-2: #33405C;
  --slate: #55637E;        /* AA on --mist */
  --on-dark: #EEF2FA;
  --on-dark-2: #A9B6D2;    /* AA on --navy-900 */

  /* ---- Status ---- */
  --green: #15A34A;
  --green-lt: #34D07A;
  --amber: #D97706;

  /* ---- Gradients ---- */
  --grad-dark: linear-gradient(135deg, #14203F 0%, #0A1124 100%);
  --grad-brand: linear-gradient(135deg, #3D4B78 0%, #14203F 100%);
  --grad-crimson: linear-gradient(100deg, #C8102E 0%, #E63950 100%);
  --grad-chrome: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  --grad-hairline: linear-gradient(90deg, transparent, var(--chrome-300), transparent);

  /* ---- Typography ---- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --fs-eyebrow: clamp(.68rem, .62rem + .2vw, .75rem);
  --fs-body: clamp(1rem, .97rem + .18vw, 1.0625rem);
  --fs-lead: clamp(1.06rem, 1rem + .38vw, 1.25rem);
  --fs-h6: clamp(1rem, .96rem + .2vw, 1.1rem);
  --fs-h5: clamp(1.1rem, 1.03rem + .32vw, 1.3rem);
  --fs-h4: clamp(1.25rem, 1.14rem + .5vw, 1.6rem);
  --fs-h3: clamp(1.45rem, 1.27rem + .82vw, 2.1rem);
  --fs-h2: clamp(1.85rem, 1.5rem + 1.6vw, 3.1rem);
  --fs-h1: clamp(2.3rem, 1.72rem + 2.65vw, 4.35rem);
  --fs-display: clamp(2.8rem, 1.9rem + 4vw, 5.6rem);

  /* ---- Spacing (8px scale) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px; --s-11: 128px;
  --section-y: clamp(72px, 9vw, 136px);
  --gutter: clamp(20px, 4vw, 40px);
  --maxw: 1240px;
  --maxw-narrow: 800px;

  /* ---- Radii ---- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* ---- Multi-layer shadows ---- */
  --sh-sm: 0 1px 2px rgba(6,11,24,.06), 0 2px 8px rgba(6,11,24,.06);
  --sh-card: 0 1px 2px rgba(6,11,24,.06), 0 8px 24px rgba(6,11,24,.08),
             0 24px 56px rgba(6,11,24,.10);
  --sh-lift: 0 2px 4px rgba(6,11,24,.08), 0 16px 40px rgba(6,11,24,.14),
             0 40px 90px rgba(61,75,120,.20);
  --sh-dark: 0 2px 6px rgba(0,0,0,.35), 0 18px 46px rgba(0,0,0,.42),
             0 40px 100px rgba(0,0,0,.30);
  --glow-crimson: 0 0 0 1px rgba(200,16,46,.32), 0 12px 40px rgba(200,16,46,.28);
  --glow-blue: 0 0 0 1px rgba(85,104,158,.30), 0 14px 46px rgba(61,75,120,.34);
  --inset-top: inset 0 1px 0 rgba(255,255,255,.14);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 180ms;
  --t-mid: 260ms;
  --t-slow: 420ms;
  --t-enter: 780ms;

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-bar: 45;
  --z-modal: 50;
  --z-toast: 60;

  /* ---- Glass ---- */
  --glass-dark: rgba(13, 23, 48, .62);
  --glass-dark-strong: rgba(10, 17, 36, .86);
  --glass-light: rgba(255, 255, 255, .82);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-blur: blur(18px) saturate(150%);
}

/* Solid fallbacks where backdrop-filter is unsupported */
@supports not (backdrop-filter: blur(4px)) {
  :root {
    --glass-dark: rgba(13, 23, 48, .95);
    --glass-dark-strong: rgba(10, 17, 36, .97);
    --glass-light: rgba(255, 255, 255, .97);
  }
}