/*
  Design tokens: one black & white palette, one typographic style.

  The site used to carry a Fire/Grass/Water mood picker (the starter-Pokemon
  dots) crossed with five colour families and five typography themes. That
  whole system is parked, unchanged, in tokens-colour-themes.disabled.css,
  which nothing loads. See the header there for how to switch it back on.

  Nothing sets [data-theme], [data-palette] or [data-style] any more, so the
  values below are simply the site's colours.
*/

:root {
  /* Type scale */
  --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.4vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 5rem);

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  --content-w: 68rem;
  --prose-w: 42rem;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;

  /* Typography + shape (was the "classic" style) */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 14px;
  --border-w: 1px;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.07);
  --shadow-m: 0 6px 24px -8px rgba(0, 0, 0, 0.2);

  /* Black & white. Paper is a hair off pure white and ink a hair off pure
     black, which reads as printed stationery rather than a screen. */
  --paper: #fafafa;
  --paper-raised: #ffffff;
  --paper-sunk: #f0efee;
  --ink: #111111;
  --ink-soft: #444444;
  --ink-faint: #8a8a8a;
  --rule: #d8d6d3;
  --accent: #111111;
  --accent-strong: #000000;
  --accent-soft: #bdbbb8;
  --accent-tint: #ededec;
  --on-accent: #ffffff;
  --gold: #767472;
}

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