:root {

  --navy-950: #0B1A2B;
  --navy-900: #0E1F33;
  --navy-800: #122A45;
  --navy-700: #16324F;
  --navy-500: #2B5277;
  --navy-300: #8FAAC4;
  --navy-200: #9FB6CC;
  --navy-100: #E2EAF2;
  --navy-050: #F0F4F8;

  --clay-700: #A8371F;
  --clay-600: #C2452C;
  --clay-500: #D5583F;
  --clay-100: #F8E5DF;

  --amber-500: #E3A322;
  --wa-600: #1E8E5A;
  --wa-700: #167347;

  --chalk-000: #FAF7F2;
  --chalk-100: #F3EEE6;
  --chalk-200: #E9E2D7;
  --white:     #FFFFFF;

  --ink-900: #141E2B;
  --ink-600: #4C5866;
  --ink-400: #7D8794;

  --ink-a06: rgba(20, 30, 43, 0.06);
  --ink-a08: rgba(20, 30, 43, 0.08);
  --ink-a12: rgba(20, 30, 43, 0.12);
  --ink-a16: rgba(20, 30, 43, 0.16);
  --paper-a08: rgba(250, 247, 242, 0.08);
  --paper-a14: rgba(250, 247, 242, 0.14);
  --paper-a32: rgba(250, 247, 242, 0.32);
  --paper-a70: rgba(250, 247, 242, 0.72);

  --heat: linear-gradient(90deg, #D5583F, #E3A322);
  --glow-clay: radial-gradient(60% 70% at 85% 10%, rgba(213, 88, 63, 0.28), transparent 60%);
  --glow-blue: radial-gradient(50% 60% at 0% 100%, rgba(143, 170, 196, 0.20), transparent 60%);

  --frost-bg: rgba(255, 255, 255, 0.55);
  --frost-line: rgba(255, 255, 255, 0.60);
  --frost-dark-bg: rgba(11, 26, 43, 0.55);
  --frost-dark-line: rgba(255, 255, 255, 0.18);

  --font-display: "Manrope", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-quote:   "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  --size-hero:    clamp(34px, 16px + 4.2vw, 74px);
  --size-h1:      clamp(36px, 22px + 2.8vw, 58px);
  --size-h2:      clamp(30px, 22px + 1.9vw, 48px);
  --size-h3:      clamp(18px, 17px + 0.4vw, 22px);
  --size-lead:    clamp(17px, 16px + 0.35vw, 20px);
  --size-body:    17px;
  --size-small:   15px;
  --size-caption: 13px;
  --size-stat:    clamp(34px, 26px + 1.4vw, 44px);
  --size-quote:   clamp(26px, 18px + 1.9vw, 44px);
  --size-ghost:   clamp(140px, 60px + 17vw, 300px);

  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight: 1.1;
  --leading-snug:  1.14;
  --leading-body:  1.55;

  --tracking-tight: -0.03em;
  --tracking-wide:   0.14em;

  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --section-pad: 56px;
  --inset: 12px;
  --header-side: var(--inset);

  --container: 1320px;
  --measure:   680px;
  --gutter:    20px;
  --header-h:  64px;
  --header-top: 22px;
  --phead-fit: 18.4;
  --bar-h:     66px;

  --btn-h:       52px;
  --btn-h-lg:    56px;
  --btn-h-sm:    46px;
  --btn-pad-x:   24px;
  --btn-size:    16px;

  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   24px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  --dur-hover: 260ms;
  --dur-ui:    600ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 800; --z-menu: 790; --z-bar: 780; --z-cursor: 900;

  --shadow-card:  0 1px 2px rgba(20, 30, 43, 0.04), 0 20px 50px -30px rgba(20, 30, 43, 0.25);
  --shadow-float: 0 14px 40px -24px rgba(20, 30, 43, 0.35);
  --shadow-hover: 0 30px 60px -30px rgba(20, 30, 43, 0.4);
  --shadow-hero:  0 30px 60px -30px rgba(0, 0, 0, 0.6);

  --surface:        var(--chalk-000);
  --surface-raised: var(--white);
  --surface-tint:   var(--chalk-100);
  --surface-ink:    var(--navy-950);

  --text:           var(--ink-900);
  --text-muted:     var(--ink-600);
  --text-soft:      var(--ink-400);
  --text-brand:     var(--navy-700);
  --text-accent:    var(--clay-600);
  --text-on-ink:    var(--chalk-000);

  --line:        var(--ink-a12);
  --line-strong: var(--ink-a16);
  --line-on-ink: var(--paper-a14);
  --focus-ring:  var(--clay-600);
}

@media (min-width: 768px)  { :root { --gutter: 32px; --section-pad: 80px; --inset: 16px; --header-h: 76px; --header-top: 28px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; --section-pad: 96px; --inset: 16px; } }
@media (min-width: 400px)  { :root { --header-side: calc(var(--inset) + 8px); } }
@media (min-width: 768px)  { :root { --header-side: calc(var(--inset) + 16px); } }
@media (min-width: 1080px) { :root { --header-side: calc(var(--inset) + clamp(4px, 4px + (100vw - 1080px) * 0.12, 28px)); } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 1ms; --dur-ui: 1ms; }
}