/* fun.johnbrodish.com — tokens.
 *
 * Same brand core as the portfolio (Ink ground, Fog text, Satoshi + Space
 * Grotesk) so it reads as the same person. Three deliberate departures:
 *
 *   1. Dark only. No polarity toggle, no theme.js. The shelf is a dark room
 *      and the cover art is the light in it.
 *   2. Each entry supplies its own --entry-accent. Teal is the site's accent;
 *      a project's own color takes over inside its card.
 *   3. Ornament is allowed here. The portfolio's no-motif, no-radius
 *      restraint rules do not govern this site.
 *
 * Base-4 still governs everything (John's standing rule): every size, line
 * height, pad and gap is a 4px multiple, stepped at 40rem/60rem. No clamps.
 */

:root {
  /* -------- color -------- */
  --ground: #111A27;            /* Ink — blue-slate, never black */
  --ground-2: #16202F;          /* one step up, for cards */
  --text: #E8ECF2;              /* Fog high */
  --text-2: #8A94A6;            /* Fog */
  --accent: #14B8A6;            /* teal, 7.0:1 on Ink */
  --hairline: #2A3441;
  --entry-accent: var(--accent);  /* each entry overrides this */

  /* -------- type -------- */
  --sans: 'Satoshi', system-ui, -apple-system, sans-serif;
  --gro: 'Space Grotesk', ui-monospace, monospace;

  --text-body: 1rem;        --lh-body: 1.5rem;      /* 16 / 24 */
  --text-lede: 1rem;        --lh-lede: 1.5rem;      /* 16 / 24 */
  --text-display: 2.25rem;  --lh-display: 2.5rem;   /* 36 / 40 */
  --text-h2: 1.75rem;       --lh-h2: 2rem;          /* 28 / 32 */
  --text-eyebrow: 0.75rem;  --lh-eyebrow: 1rem;     /* 12 / 16 */
  --text-fine: 0.75rem;     --lh-fine: 1.25rem;     /* 12 / 20 */
  --text-link: 1rem;                                /* 16 */

  /* -------- space · 4pt -------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* -------- layout -------- */
  --measure: 34rem;
  --page: 64rem;
  --pad: 1.25rem;               /* 20 → 32 → 48 */

  /* -------- shape + motion -------- */
  --r-card: 12px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;

  color-scheme: dark;
}

@media (min-width: 40rem) {
  :root {
    --text-display: 3rem;    --lh-display: 3.25rem;  /* 48 / 52 */
    --text-h2: 2rem;         --lh-h2: 2.25rem;       /* 32 / 36 */
    --text-lede: 1.25rem;    --lh-lede: 2rem;        /* 20 / 32 */
    --pad: 2rem;
  }
}

@media (min-width: 60rem) {
  :root {
    --text-display: 4rem;    --lh-display: 4.25rem;  /* 64 / 68 */
    --text-h2: 2.25rem;      --lh-h2: 2.5rem;        /* 36 / 40 */
    --pad: 3rem;
  }
}