:root {
  /* Surfaces */
  --paper: #ffffff;
  --paper-2: #f7f8fa;
  --paper-3: #eef0f4;
  --paper-4: #e3e6ec;
  --paper-warm: #fbfbfa;

  /* RGB helpers (used in site.css) */
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;
  --paper-rgb: 255 255 255;
  --paper-2-rgb: 247 248 250;
  --ink-rgb: 10 13 20;
  --accent-rgb: 64 83 199;
  --accent-2-rgb: 124 138 232;
  --accent-mid-rgb: 99 114 213;
  --danger-rgb: 214 52 44;
  --danger-tint-rgb: 255 243 242;
  --mint-rgb: 47 158 68;
  --gold-rgb: 184 138 31;
  --orange-rgb: 217 117 52;

  /* Ink */
  --ink: #0a0d14;
  --ink-2: #1c2230;
  --muted: #5b6273;
  --soft: #8d94a3;
  --white: #fff;
  --black: #000;

  /* Lines */
  --line: rgba(10, 13, 20, 0.1);
  --line-soft: rgba(10, 13, 20, 0.06);
  --hatch: rgba(10, 13, 20, 0.04);
  --dot: rgba(10, 13, 20, 0.07);

  /* Phone hardware bezel */
  --bezel-1: #0a0d14;
  --bezel-2: #1a1d28;
  --bezel-3: #2c3144;
  --bezel-4: #3a4054;

  /* Pricing featured tier (dark card on paper page) */
  --night-1: #0a0d14;
  --night-2: #13182a;
  --night-3: #0e1220;

  /* Phone screen + chart surfaces */
  --screen-1: #fbfbf8;
  --screen-2: #fafbfd;
  --screen-3: #f3f5fa;
  --track: #e7eaf2;

  /* Semantic text shades */
  --mint-text: #1e7f37;
  --mint-light: #7be09b;
  --danger-light: #ffb4b8;
  --risk-text: #8f4619;
  --orange-2: #d97534;

  /* Accent — soft indigo */
  --accent: #4053c7;
  --accent-2: #7c8ae8;
  --accent-3: #b3bdf2;
  --accent-soft: rgba(64, 83, 199, 0.08);

  /* Semantic */
  --mint: #2f9e44;
  --gold: #b88a1f;
  --gold-rgb: 184 138 31;
  --gold-soft: rgba(184, 138, 31, 0.14);
  --orange: #d97534;

  /* Raven — hero emphasis (darker vertical metal blue/purple) */
  --raven-hero-1: #181f2e;
  --raven-hero-2: #252f42;
  --raven-hero-3: #364458;
  --raven-hero-4: #4f6178;
  --raven-hero-5: #6a7a92;

  /* Section header dual-shader — balanced steel (bright stops capped ~35% below peak) */
  --header-lr-1: #2a3548;
  --header-lr-2: #445a74;
  --header-lr-3: #6d88a6;
  --header-tb-1: #2e3a4e;
  --header-tb-2: #4e6380;
  --header-tb-3: #94a8c0;

  /* text-shader-muted — static slate gradient (darker left → lighter right, ref. hero “call.”) */
  --shader-muted-dark: #3d5168;
  --shader-muted-mid: #526580;
  --shader-muted-light: #6a84a0;
  --shader-muted-bright: #8aa0b8;

  /* text-shader-flow — index footer; seamless loop light → dark → light */
  --shader-flow-light: #8aa0b8;
  --shader-flow-mid: #5a7290;
  --shader-flow-dark: #3d5168;
  --shader-flow-deep: #2a3548;

  /* Signal explorer mode accents (layered vertical gradients — image 3 guide) */
  --signal-human-1: #166b45;
  --signal-human-solid: #145c3a;
  --signal-human-teal: #1fb8a1;
  --signal-human-teal-soft: rgba(31, 184, 161, 0.14);
  --signal-human-2: #2d8f5f;
  --signal-human-3: #6bc49a;
  --signal-human-4: #cfeedd;
  --signal-human-5: #f6fcf9;
  --signal-ai-1: #b84a0f;
  --signal-ai-solid: #a3410c;
  --signal-ai-2: #d97534;
  --signal-ai-eyebrow-soft: rgba(217, 117, 52, 0.14);
  --signal-ai-3: #f0a56a;
  --signal-ai-4: #ffd9bc;
  --signal-ai-5: #fff8f2;
  --danger: #d6342c;
  --danger-soft: rgba(214, 52, 44, 0.08);

  /* Focus */
  --color-focus: #4053c7;

  /* Type */
  --font-sans: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Fragment Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-display-xl: clamp(56px, 7.6vw, 120px);
  --text-display-l: clamp(44px, 5.6vw, 86px);
  --text-display: clamp(36px, 4.4vw, 62px);
  --text-display-s: clamp(28px, 3vw, 44px);
  --text-h3: 22px;
  --text-lead: clamp(17px, 1.5vw, 20px);
  --text-body: 16px;
  --text-micro: 11px;

  /* Spacing — 4pt scale */
  --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-32: 128px;
  --space-36: 144px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.45, 0, 0.55, 0);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);

  /* Duration */
  --dur-fast: 180ms;
  --dur-med: 280ms;
  --dur-slow: 480ms;
  --dur-reveal: 780ms;

  /* Rules */
  --rule-1: 1px;
  --rule-2: 2px;
}