@layer tokens {
  :root {
    --font-display: "Exo 2", "Arial Black", sans-serif;
    --font-label: "Orbitron", "Exo 2", sans-serif;
    --font-body: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-slab: "Alfa Slab One", "Rockwell", serif;
    --font-serif: "Zilla Slab", "Rockwell", Georgia, serif;
    --font-collegiate: "Graduate", "Alfa Slab One", serif;
    --font-script: "Yellowtail", "Brush Script MT", cursive;

    --team-primary: #1b2a41;
    --team-secondary: #c9d1d9;
    --team-accent: #39f3ff;

    /* The house color: slab label frames and the form grade badge. */
    --cheddar: #ee9b1a;

    --radius-card: 14px;
    --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: 4.5rem;

    /* Fractal noise, the grain under cardboard, wood, and foil. */
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .18' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .09 0 0 0 0 .03 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  }

  /* Modern holo: high-contrast dark mode, deep blues, neon team accents. */
  [data-edition="modern"] {
    color-scheme: dark;
    --bg: #04060d;
    --surface: #0b1122;
    --surface-raised: #111a33;
    --ink: #eef3ff;
    --ink-muted: #93a1c6;
    --line: rgb(140 170 255 / 0.16);
    --neon: #39f3ff;
    --neon-hot: #ff3df2;
    --gold: #f5c84b;
    --heading-font: var(--font-display);
    --heading-style: italic;
    --heading-weight: 900;
    --body-font: var(--font-body);
    --label-font: var(--font-label);
    --link: #7fe9ff;
  }

  /* Vintage cardboard: soft cream, wood paneling, slightly desaturated team colors. */
  [data-edition="vintage"] {
    color-scheme: light;
    --bg: #5b3a22;
    --surface: #f3e8cf;
    --surface-raised: #fbf3df;
    --ink: #2c2017;
    --ink-muted: #6f5b46;
    --line: rgb(70 45 20 / 0.22);
    --neon: #b8322a;
    --neon-hot: #1f4e8c;
    --gold: #c9962e;
    --heading-font: var(--font-slab);
    --heading-style: normal;
    --heading-weight: 400;
    --body-font: var(--font-serif);
    --label-font: var(--font-collegiate);
    --link: #9b2a22;
  }

  [data-edition="vintage"] [data-team], [data-edition="vintage"][data-team], .card--vintage {
    --team-vintage: color-mix(in oklab, var(--team-primary) 78%, #9c8a68);
    --team-vintage-secondary: color-mix(in oklab, var(--team-secondary) 70%, #b9a37a);
  }
}