:root {
  --cyan-light: #5fc8ec;
  --cyan: #00a6de;
  --cyan-dark: #0a6e96;

  --ink: #14161a;
  --graphite: #33373d;
  --steel: #6b7178;
  --ash: #aeb4ba;
  --mist: #e8ebed;
  --paper: #f7f9fa;
  --white: #ffffff;

  --ink-a04: rgba(20, 22, 26, 0.04);
  --ink-a08: rgba(20, 22, 26, 0.08);
  --ink-a12: rgba(20, 22, 26, 0.12);
  --ink-a24: rgba(20, 22, 26, 0.24);
  --ink-a56: rgba(20, 22, 26, 0.56);
  --cyan-a08: rgba(0, 166, 222, 0.08);
  --cyan-a16: rgba(0, 166, 222, 0.16);
  --cyan-a32: rgba(0, 166, 222, 0.32);
  --paper-a08: rgba(247, 249, 250, 0.08);
  --paper-a16: rgba(247, 249, 250, 0.16);
  --paper-a64: rgba(247, 249, 250, 0.64);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--mist);
  --surface-inverse: var(--ink);
  --surface-accent: var(--cyan);
  --surface-accent-wash: var(--cyan-a08);

  --text-primary: var(--ink);
  --text-secondary: var(--graphite);
  --text-muted: var(--steel);
  --text-disabled: var(--ash);
  --text-inverse: var(--paper);
  --text-inverse-muted: var(--ash);
  --text-accent: var(--cyan-dark);
  --text-accent-inverse: var(--cyan-light);
  --text-link: var(--cyan-dark);
  --text-link-hover: var(--ink);

  --line-hairline: var(--ink-a12);
  --line-rule: var(--ink);
  --line-subtle: var(--mist);
  --line-strong: var(--graphite);
  --line-accent: var(--cyan);
  --line-inverse: var(--paper-a16);
  --focus-ring: var(--cyan);

  --action-primary: var(--ink);
  --action-primary-hover: var(--graphite);
  --action-primary-active: #000205;
  --action-accent: var(--cyan);
  --action-accent-hover: #0098cc;
  --action-accent-active: var(--cyan-dark);
  --action-quiet-hover: var(--ink-a04);
  --action-quiet-active: var(--ink-a08);

  --font-core: "Archivo", "Helvetica Now Text", "Helvetica Neue", Helvetica, sans-serif;
  --font-core-display: "Archivo", "Helvetica Now Display", "Helvetica Neue", Helvetica, sans-serif;
  --font-core-micro: "Archivo", "Helvetica Now Micro", "Helvetica Neue", Helvetica, sans-serif;
  --font-voice: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

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

  --fs-micro: 11px;
  --fs-caption: 12px;
  --fs-label: 13px;
  --fs-body-sm: 14px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-h6: 20px;
  --fs-h5: 24px;
  --fs-h4: 32px;
  --fs-h3: 44px;
  --fs-h2: 60px;
  --fs-h1: 84px;

  --lh-tight: 0.92;
  --lh-display: 1;
  --lh-heading: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-body: 0em;
  --ls-micro: 0.02em;
  --ls-caps: 0.14em;

  --text-h1: var(--w-bold) var(--fs-h1) / var(--lh-display) var(--font-core-display);
  --text-h2: var(--w-bold) var(--fs-h2) / var(--lh-heading) var(--font-core-display);
  --text-h3: var(--w-semibold) var(--fs-h3) / var(--lh-heading) var(--font-core-display);
  --text-h4: var(--w-semibold) var(--fs-h4) / var(--lh-heading) var(--font-core);
  --text-h5: var(--w-medium) var(--fs-h5) / var(--lh-snug) var(--font-core);
  --text-h6: var(--w-medium) var(--fs-h6) / var(--lh-snug) var(--font-core);
  --text-body: var(--w-regular) var(--fs-body) / var(--lh-body) var(--font-core);
  --text-body-sm: var(--w-regular) var(--fs-body-sm) / var(--lh-body) var(--font-core);
  --text-label: var(--w-medium) var(--fs-label) / var(--lh-snug) var(--font-core);
  --text-eyebrow: var(--w-semibold) var(--fs-micro) / var(--lh-snug) var(--font-core-micro);
  --text-caption: var(--w-regular) var(--fs-caption) / var(--lh-snug) var(--font-core-micro);
  --text-read: var(--w-regular) var(--fs-body-lg) / var(--lh-loose) var(--font-voice);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  --gutter: var(--sp-8);
  --container-max: 1280px;
  --container-narrow: 720px;

  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --hit-min: 44px;
  --border-hair: 1px;
  --border-rule: 2px;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --r-btn-sm: var(--r-sm);
  --r-btn-md: var(--r-md);
  --r-btn-lg: var(--r-lg);
  --r-card: var(--r-md);

  --elev-1: 0 1px 0 var(--ink-a08), 0 6px 10px -8px var(--ink-a12);
  --elev-2: 0 2px 0 var(--ink-a08), 0 18px 32px -18px var(--ink-a24);
  --shadow-menu: 0 8px 24px -8px rgba(20, 22, 26, 0.18), 0 1px 0 var(--ink-a08);
  --ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);
  --ring-inverse: 0 0 0 2px var(--ink), 0 0 0 4px var(--cyan);

  --halftone-fine: radial-gradient(var(--ink-a12) 1px, transparent 1px) 0 0 / 6px 6px;
  --halftone-base: radial-gradient(var(--ink-a12) 1.5px, transparent 1.5px) 0 0 / 9px 9px;
  --halftone-coarse: radial-gradient(var(--ink-a24) 2.5px, transparent 2.5px) 0 0 / 14px 14px;
  --halftone-inverse: radial-gradient(var(--paper-a16) 1.5px, transparent 1.5px) 0 0 / 9px 9px;

  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-mech: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-hover: var(--dur-fast) var(--ease-mech);
  --t-press: var(--dur-instant) var(--ease-mech);
  --t-panel: var(--dur-base) var(--ease-out);
}

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

@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --fs-h1: 44px;
    --fs-h2: 36px;
    --fs-h3: 28px;
    --fs-h4: 24px;
    --fs-h5: 20px;
  }
}