@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/inter-latin.woff2") format("woff2");
}

/* Design tokens: the whole vocabulary the site is drawn with. Everything else in base.css and components.css is these values in
   combination, so a change here moves every page at once. Colour steps are oklch, which keeps the neutral ramp
   perceptually even and lets one hue drive a whole family. */

:root {
  color-scheme: light;

  /* neutrals: a very slightly cool grey ramp */
  --n-0: oklch(100% 0 0);
  --n-25: oklch(98.6% 0.002 265);
  --n-50: oklch(96.8% 0.003 265);
  --n-100: oklch(93.6% 0.004 265);
  --n-200: oklch(88.4% 0.006 265);
  --n-300: oklch(79.6% 0.008 265);
  --n-400: oklch(66.5% 0.011 265);
  --n-500: oklch(55.4% 0.013 265);
  --n-600: oklch(45.6% 0.014 265);
  --n-700: oklch(37.4% 0.014 265);
  --n-800: oklch(28.2% 0.013 265);
  --n-900: oklch(20.8% 0.012 265);
  --n-950: oklch(14.6% 0.011 265);

  /* the accent family: one hue, five steps */
  --a-100: oklch(93% 0.035 185);
  --a-200: oklch(85% 0.07 185);
  --a-300: oklch(73% 0.12 185);
  --a-400: oklch(63% 0.16 185);
  --a-500: oklch(55% 0.15 185);
  --a-600: oklch(48% 0.14 185);
  --a-700: oklch(41% 0.12 185);

  /* the rare second voice: limiteds, roles, anything that wants to be noticed */
  --p-300: oklch(76% 0.12 320);
  --p-500: oklch(58% 0.19 320);
  --p-600: oklch(49% 0.18 320);

  --g-300: oklch(80% 0.13 155);
  --g-500: oklch(60% 0.14 155);
  --g-600: oklch(50% 0.12 155);

  --y-300: oklch(85% 0.12 85);
  --y-500: oklch(76% 0.14 80);
  --y-700: oklch(52% 0.12 70);

  --r-300: oklch(76% 0.14 22);
  --r-500: oklch(60% 0.19 22);
  --r-600: oklch(50% 0.17 22);

  /* roles */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --surface-3: var(--n-100);
  --surface-inset: var(--n-100);
  --text: var(--n-900);
  --text-2: var(--n-700);
  --muted: var(--n-500);
  --line: var(--n-200);
  --line-strong: var(--n-300);

  --accent: var(--a-500);
  --accent-hover: var(--a-600);
  --accent-active: var(--a-700);
  --accent-soft: var(--a-100);
  --accent-soft-hover: var(--a-200);
  --accent-text: var(--n-0);
  --accent-2: var(--p-500);
  --accent-3: var(--p-600);

  --good: var(--g-600);
  --good-soft: color-mix(in oklch, var(--g-500) 14%, var(--surface));
  --gold: var(--y-700);
  --gold-bright: var(--y-500);
  --gold-soft: color-mix(in oklch, var(--y-500) 18%, var(--surface));
  --danger: var(--r-600);
  --danger-hover: color-mix(in oklch, var(--r-600) 88%, black);
  --danger-soft: color-mix(in oklch, var(--r-500) 13%, var(--surface));
  --buy: var(--g-600);
  --buy-bright: var(--g-500);
  --buy-text: oklch(99% 0 0);
  --game: var(--a-500);

  --header: var(--n-950);
  --header-2: var(--n-900);
  --header-text: var(--n-50);
  --header-muted: var(--n-400);

  /* type: a single family, five sizes, two weights */
  --font: Inter, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 1.9375rem;
  --t-3xl: 2.5rem;
  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh: 1.55;

  /* space: 4px, named by step */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  --radius-s: var(--r-sm);

  /* depth: borders do the work, shadows only for things that float */
  --edge: 1px solid var(--line);
  --shadow: 0 1px 2px oklch(20% 0.01 265 / 0.06);
  --shadow-md: 0 2px 4px oklch(20% 0.01 265 / 0.06), 0 4px 12px oklch(20% 0.01 265 / 0.05);
  --shadow-up: 0 6px 16px oklch(20% 0.01 265 / 0.1), 0 2px 4px oklch(20% 0.01 265 / 0.06);
  --shadow-lg: 0 16px 48px oklch(20% 0.01 265 / 0.18), 0 4px 12px oklch(20% 0.01 265 / 0.08);
  --ring: 0 0 0 3px color-mix(in oklch, var(--accent) 30%, transparent);

  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 110ms;
  --normal: 180ms;
  --slow: 320ms;

  --header-h: 3.5rem;
  --page: 70rem;
  --page-wide: 88rem;
  --z-sticky: 20;
  --z-header: 40;
  --z-pop: 60;
  --z-toast: 80;

  /* one gradient, used twice: the brand mark and the front page's hero */
  --brand: linear-gradient(135deg, var(--a-400), var(--p-500));
}

:root[data-density="compact"] {
  --header-h: 3rem;
  --s-4: 0.75rem;
  --s-5: 1rem;
  --s-6: 1rem;
  --s-8: 1.5rem;
  --s-10: 1.75rem;
  --s-12: 2rem;
}

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

  --bg: var(--n-950);
  --surface: var(--n-900);
  --surface-2: var(--n-900);
  --surface-3: var(--n-800);
  --surface-inset: oklch(11% 0.01 265);
  --text: var(--n-100);
  --text-2: var(--n-300);
  --muted: var(--n-400);
  --line: var(--n-800);
  --line-strong: var(--n-700);

  --accent: var(--a-300);
  --accent-hover: var(--a-200);
  --accent-active: var(--a-100);
  --accent-soft: color-mix(in oklch, var(--a-400) 20%, var(--surface));
  --accent-soft-hover: color-mix(in oklch, var(--a-300) 26%, var(--surface));
  --accent-text: oklch(16% 0.02 265);

  --good: var(--g-300);
  --gold: var(--y-500);
  --gold-bright: var(--y-300);
  --danger: var(--r-300);
  --danger-hover: var(--r-500);
  --buy: var(--g-500);
  --buy-bright: var(--g-300);
  --buy-text: oklch(16% 0.02 155);

  --header: oklch(9% 0.008 265);
  --header-2: var(--n-900);

  --shadow: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 2px 6px oklch(0% 0 0 / 0.45);
  --shadow-up: 0 8px 24px oklch(0% 0 0 / 0.55);
  --shadow-lg: 0 20px 56px oklch(0% 0 0 / 0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: var(--n-950);
    --surface: var(--n-900);
    --surface-2: var(--n-900);
    --surface-3: var(--n-800);
    --surface-inset: oklch(11% 0.01 265);
    --text: var(--n-100);
    --text-2: var(--n-300);
    --muted: var(--n-400);
    --line: var(--n-800);
    --line-strong: var(--n-700);

    --accent: var(--a-300);
    --accent-hover: var(--a-200);
    --accent-active: var(--a-100);
    --accent-soft: color-mix(in oklch, var(--a-400) 20%, var(--surface));
    --accent-soft-hover: color-mix(in oklch, var(--a-300) 26%, var(--surface));
    --accent-text: oklch(16% 0.02 265);

    --good: var(--g-300);
    --gold: var(--y-500);
    --gold-bright: var(--y-300);
    --danger: var(--r-300);
    --danger-hover: var(--r-500);
    --buy: var(--g-500);
    --buy-bright: var(--g-300);
    --buy-text: oklch(16% 0.02 155);

    --header: oklch(9% 0.008 265);
    --header-2: var(--n-900);

    --shadow: 0 1px 2px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 2px 6px oklch(0% 0 0 / 0.45);
    --shadow-up: 0 8px 24px oklch(0% 0 0 / 0.55);
    --shadow-lg: 0 20px 56px oklch(0% 0 0 / 0.65);
  }
}

/* the site's own theme choice, kept between visits (site.js applies it before first paint) */
:root[data-theme="light"] {
  color-scheme: light;
}