/* TYPHON design tokens — from the TYPHON Design System handoff. */
:root {
  /* Fonts */
  --font-sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-data: var(--font-mono);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale — display */
  --size-display-xl: 104px; --lh-display-xl: .94;
  --size-display-lg: 76px;  --lh-display-lg: .98;
  --size-display-md: 54px;  --lh-display-md: 1.04;
  --size-display-sm: 40px;  --lh-display-sm: 1.1;
  /* Type scale — headings */
  --size-h1: 32px; --lh-h1: 1.15;
  --size-h2: 24px; --lh-h2: 1.2;
  --size-h3: 20px; --lh-h3: 1.3;
  --size-h4: 17px; --lh-h4: 1.35;
  /* Type scale — body */
  --size-body-lg: 17px; --lh-body-lg: 1.6;
  --size-body: 15px;    --lh-body: 1.55;
  --size-body-sm: 13px; --lh-body-sm: 1.5;
  --size-caption: 11px; --lh-caption: 1.35;

  --tracking-display: -.02em;
  --tracking-heading: -.015em;
  --tracking-body: 0;
  --tracking-mono: -.01em;
  --tracking-eyebrow: .14em;

  --eyebrow-size: 11px;
  --eyebrow-weight: 600;

  /* Base — Abyss (deep sea blue, the spine of the brand) */
  --abyss-950: #03101F; --abyss-900: #06192E; --abyss-800: #0A2540; --abyss-700: #0E3357;
  --abyss-600: #134679; --abyss-500: #1A5FA0; --abyss-400: #2E80C8; --abyss-300: #63A8E0;
  --abyss-200: #A5CDF0; --abyss-100: #D6E8FA; --abyss-050: #EDF5FD;
  /* Base — Electric (the logo blue; the single accent) */
  --electric-700: #0B3AA8; --electric-600: #0F49CE; --electric-500: #0050FA;
  --electric-400: #3B77FF; --electric-300: #7BA4FF; --electric-200: #B4CCFF; --electric-100: #E0EAFF;
  /* Base — Tide (supporting tint, patterns and quiet glows only) */
  --tide-700: #0B6E7E; --tide-600: #0E8A9C; --tide-500: #16A9BC; --tide-400: #3CC5D4;
  --tide-300: #79DCE6; --tide-200: #B4EDF2; --tide-100: #DFF7F9;
  /* Base — Ember (single warm spark, used sparingly) */
  --ember-700: #C24A16; --ember-600: #E2601C; --ember-500: #FB7A3C; --ember-400: #FD9A67;
  --ember-300: #FEBC98; --ember-200: #FFD8C4; --ember-100: #FFEDE4;
  /* Base — Mist (cool neutral ramp) */
  --mist-000: #FFFFFF; --mist-050: #FAFCFE; --mist-100: #F2F6FA; --mist-200: #E9EFF6;
  --mist-300: #DAE3EE; --mist-400: #C2CEDD; --mist-500: #94A3B8; --mist-600: #647589;
  --mist-700: #44536A; --mist-800: #26344A; --mist-900: #141F30;
  /* Base — semantic hues */
  --kelp-600: #12805C; --kelp-500: #1C9C70; --kelp-100: #DDF2EA;
  --rust-600: #B03A2E; --rust-500: #D14A3A; --rust-100: #FBE4E0;
  --amber-600: #9A6B10; --amber-500: #C99026; --amber-100: #FBF0DC;

  /* Semantic — surfaces */
  --surface-page: var(--mist-100);
  --surface-card: var(--mist-000);
  --surface-sunken: var(--mist-200);
  --surface-inverse: var(--abyss-800);
  --surface-inverse-deep: var(--abyss-950);
  --surface-accent-soft: var(--abyss-050);
  --surface-tide-soft: var(--tide-100);
  --surface-electric-soft: var(--electric-100);
  --surface-ember-soft: var(--ember-100);

  /* Semantic — text */
  --text-strong: var(--abyss-900);
  --text-body: var(--mist-800);
  --text-muted: var(--mist-600);
  --text-faint: var(--mist-500);
  --text-on-inverse: var(--mist-100);
  --text-on-inverse-muted: var(--abyss-200);
  --text-accent: var(--electric-600);
  --text-link: var(--electric-600);
  --text-link-hover: var(--electric-500);

  /* Semantic — lines */
  --border-hairline: var(--mist-300);
  --border-strong: var(--mist-400);
  --border-inverse: rgba(165, 205, 240, .20);
  --border-focus: var(--electric-400);

  /* Semantic — interactive */
  --action-primary: var(--abyss-700);
  --action-primary-hover: var(--abyss-800);
  --action-primary-press: var(--abyss-900);
  --action-accent: var(--electric-500);
  --action-accent-hover: var(--electric-600);
  --action-accent-press: var(--electric-700);
  --action-quiet-hover: var(--mist-100);

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;
  --space-11: 80px; --space-12: 112px; --space-13: 160px;
  --page-max: 1280px;
  --prose-max: 64ch;
  --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px;

  /* Radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;
  --radius-card: var(--radius-xl);
  --radius-control: var(--radius-sm);

  /* Elevation */
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-card: 0 1px 2px rgba(6, 25, 46, .04), 0 10px 28px -14px rgba(6, 25, 46, .16);
  --shadow-card-hover: 0 2px 5px rgba(6, 25, 46, .06), 0 20px 44px -18px rgba(6, 25, 46, .24);
  --shadow-float: 0 14px 36px -10px rgba(6, 25, 46, .20), 0 2px 6px rgba(6, 25, 46, .06);
  --shadow-overlay: 0 28px 72px -18px rgba(3, 16, 31, .36);
  --focus-ring: 0 0 0 3px rgba(59, 119, 255, .36);
  --focus-ring-inverse: 0 0 0 3px rgba(123, 164, 255, .45);
  --scrim: rgba(3, 16, 31, .56);
  --blur-veil: saturate(150%) blur(16px);

  /* Motion */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; --dur-reveal: 720ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.6, 0, .9, .3);
  --press-scale: .985;

  /* Patterns — halftone dot screens */
  --pattern-halftone-fine: radial-gradient(currentColor 1px, transparent 1.15px);
  --pattern-halftone: radial-gradient(currentColor 1.6px, transparent 1.8px);
  --pattern-halftone-coarse: radial-gradient(currentColor 2.6px, transparent 2.9px);
  --pattern-halftone-size-fine: 5px 5px;
  --pattern-halftone-size: 8px 8px;
  --pattern-halftone-size-coarse: 12px 12px;

  /* Square halftone — solid fill punched by an SVG mask (hard square dots) */
  --mask-square-fine: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3C/svg%3E");
  --mask-square: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='3' height='3' fill='%23fff'/%3E%3C/svg%3E");
  --mask-square-coarse: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='5' height='5' fill='%23fff'/%3E%3C/svg%3E");

  /* Crosshatch — engraved plate texture, 45° rules */
  --pattern-crosshatch: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 7px);
  --pattern-hatch: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 6px);
  --pattern-hatch-wide: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 14px);

  /* Survey grid */
  --pattern-grid: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  --pattern-grid-size: 64px 64px;
  --pattern-grid-size-fine: 16px 16px;

  /* Scanline */
  --pattern-scanline: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 6px);

  /* Depth washes */
  --wash-abyss: linear-gradient(180deg, #0A2540 0%, #06192E 55%, #03101F 100%);
  --wash-caustic: radial-gradient(60% 42% at 22% 12%, rgba(99, 168, 224, .22) 0%, transparent 70%), radial-gradient(48% 38% at 82% 30%, rgba(22, 169, 188, .18) 0%, transparent 72%);

  /* Film grain */
  --noise: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms;
    --press-scale: 1;
  }
}