/* THE CUT — brand tokens. Light is the product. Dark is a toggle. */
:root,
html[data-theme="light"] {
  --brand-optic: #DFFF00;
  --brand-navy: #001F3F;
  --brand-crimson: #A52A2A;
  --brand-chalk: #F0F0F0;
  --brand-black: #0B0D0E;
  --brand-white: #FFFFFF;

  --page: #F0F0F0;
  --ink: #0B0D0E;
  --surface: #FFFFFF;
  --muted: #3a3d40;
  --hair: rgba(0, 31, 63, 0.18);
  --hat-line: #001F3F;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-h1: clamp(2.75rem, 5.5vw, 4.75rem);
  --text-h2: clamp(1.6rem, 2.6vw, 2.4rem);
  --text-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --text-hero: clamp(3.25rem, 8vw, 6.5rem);
  --text-hero-sub: clamp(1.85rem, 4.2vw, 3.25rem);
  --text-body: 1.0625rem;
  --text-meta: 0.8125rem;
  --text-soon: 12px;

  --lh-body: 1.5;
  --track-meta: 0.14em;
  --track-display: 0.04em;
  --track-soon: 0.16em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;
  --gutter: 2rem;
  --clear-x: 1.5rem;

  --rule: 1px solid var(--hair);
  --rule-optic: 2px solid var(--brand-optic);
  --rule-optic-thin: 1px solid var(--brand-optic);
  --max: 80rem;
  --cols: repeat(12, minmax(0, 1fr));
}

html[data-theme="dark"] {
  --page: #0B0D0E;
  --ink: #F0F0F0;
  --surface: #0B0D0E;
  --muted: #c8c8c8;
  --hair: rgba(240, 240, 240, 0.14);
  --hat-line: #DFFF00;
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }