@layer tokens {
  @property --stripe-shift {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }

  :root {
    color-scheme: light dark;

    /* Herbie palette */
    --pearl: oklch(96.5% 0.012 85);
    --cream: oklch(93% 0.03 85);
    --racing-red: oklch(52% 0.2 25);
    --racing-blue: oklch(42% 0.15 262);
    --sunflower: oklch(84% 0.16 88);
    --chrome: oklch(84% 0.01 250);
    --asphalt: oklch(24% 0.015 260);
    --night: oklch(17% 0.02 265);

    /* Semantic tokens (light) */
    --bg: var(--pearl);
    --bg-raised: oklch(99% 0.006 85);
    --bg-sunken: var(--cream);
    --ink: oklch(23% 0.02 260);
    --ink-soft: oklch(42% 0.02 260);
    --ink-faint: oklch(60% 0.015 260);
    --line: oklch(85% 0.02 85);
    --accent: var(--racing-red);
    --accent-2: var(--racing-blue);
    --accent-ink: white;
    --focus: oklch(65% 0.2 250);
    --shadow-color: 30deg 20% 30%;
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.12), 0 2px 6px hsl(var(--shadow-color) / 0.08);
    --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.1), 0 8px 24px hsl(var(--shadow-color) / 0.12);
    --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.1), 0 20px 50px hsl(var(--shadow-color) / 0.18);

    /* Type */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-marquee: "Bungee", "Arial Black", system-ui, sans-serif;
    --font-body: "Work Sans", system-ui, sans-serif;
    --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

    --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --step-2: clamp(1.45rem, 1.3rem + 0.8vw, 1.95rem);
    --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
    --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
    --step-5: clamp(2.6rem, 1.7rem + 4.4vw, 5.6rem);

    /* Space & shape */
    --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem;
    --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem;
    --radius-s: 0.4rem; --radius-m: 0.85rem; --radius-l: 1.5rem; --radius-pill: 999px;
    --page-max: 78rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);

    --stripes: linear-gradient(90deg,
      transparent 0 calc(50% - 1.6rem),
      var(--racing-red) 0 calc(50% - 0.45rem),
      var(--pearl) 0 calc(50% - 0.2rem),
      var(--racing-blue) 0 calc(50% + 0.2rem),
      var(--pearl) 0 calc(50% + 0.45rem),
      var(--racing-red) 0 calc(50% + 1.6rem),
      transparent 0);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: var(--night);
      --bg-raised: oklch(22% 0.022 265);
      --bg-sunken: oklch(14% 0.02 265);
      --ink: oklch(94% 0.012 85);
      --ink-soft: oklch(78% 0.015 85);
      --ink-faint: oklch(62% 0.015 260);
      --line: oklch(32% 0.02 265);
      --accent: oklch(66% 0.2 25);
      --accent-2: oklch(70% 0.13 255);
      --shadow-color: 260deg 40% 3%;
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--night);
    --bg-raised: oklch(22% 0.022 265);
    --bg-sunken: oklch(14% 0.02 265);
    --ink: oklch(94% 0.012 85);
    --ink-soft: oklch(78% 0.015 85);
    --ink-faint: oklch(62% 0.015 260);
    --line: oklch(32% 0.02 265);
    --accent: oklch(66% 0.2 25);
    --accent-2: oklch(70% 0.13 255);
    --shadow-color: 260deg 40% 3%;
  }

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

  /* "Drive-in" theme: Monte Carlo at midnight. */
  :root[data-theme="drive-in"] {
    color-scheme: dark;
    --bg: oklch(20% 0.06 300);
    --bg-raised: oklch(26% 0.07 300);
    --bg-sunken: oklch(15% 0.05 300);
    --ink: oklch(95% 0.03 90);
    --ink-soft: oklch(82% 0.06 90);
    --ink-faint: oklch(66% 0.05 300);
    --line: oklch(36% 0.07 300);
    --accent: oklch(78% 0.17 85);
    --accent-2: oklch(72% 0.18 350);
    --accent-ink: oklch(20% 0.05 300);
    --shadow-color: 300deg 50% 5%;
  }
}