/* fun.johnbrodish.com — tokens.
 *
 * Same system as the portfolio (site/public/tokens.css), kept in step by hand:
 * one token set, two polarities, teal as the only accent — eyebrows, rules,
 * and standalone links. The site should read as the same person and the same
 * site as johnbrodish.com, not a spinoff.
 *
 * Base-4 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 · dark polarity (site default) -------- */
  --ground: #111A27;            /* Ink — blue-slate, never black */
  --text: #E8ECF2;              /* Fog high */
  --text-2: #8A94A6;            /* Fog */
  --accent: #14B8A6;            /* teal on dark, 7.0:1 */
  --hairline: #2A3441;
  --exhibit-ground: #16202F;    /* one step above Ink, for cards */

  /* -------- type · base-4 (mobile-first values; stepped below) -------- */
  --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-title: 2rem;       --lh-title: 2.25rem;    /* 32 / 36 — page title, same step as the portfolio's interior pages */
  --text-h3: 1.5rem;        --lh-h3: 1.75rem;       /* 24 / 28 — entry titles, same step as the portfolio's */
  --text-eyebrow: 0.75rem;  --lh-eyebrow: 1rem;     /* 12 / 16 */
  --text-fine: 0.75rem;     --lh-fine: 1.25rem;     /* 12 / 20 */
  --text-link: 1rem;                                /* 16 */
  --text-link-small: 0.75rem;                       /* 12 — masthead nav, toggle */

  /* -------- 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: 72rem;
  --pad: 1.25rem;               /* 20 → 32 → 48 */

  /* -------- motion -------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  color-scheme: dark;
}

@media (min-width: 40rem) {
  :root {
    --text-title: 2.5rem;    --lh-title: 2.75rem;    /* 40 / 44 */
    --text-h3: 1.75rem;      --lh-h3: 2rem;          /* 28 / 32 */
    --text-lede: 1.25rem;    --lh-lede: 2rem;        /* 20 / 32 */
    --pad: 2rem;
  }
}

@media (min-width: 60rem) {
  :root {
    --text-title: 3rem;      --lh-title: 3.25rem;    /* 48 / 52 */
    --text-h3: 2rem;         --lh-h3: 2.25rem;       /* 32 / 36 */
    --pad: 3rem;
  }
}

:root[data-theme="light"] {
  --ground: #FBFAF7;            /* Paper — warm off-white */
  --text: #111A27;              /* Ink as text */
  --text-2: #5C6675;            /* Slate */
  --accent: #0F766E;            /* teal on light, 5.5:1 */
  --hairline: #D7DCE4;
  --exhibit-ground: #F2F0EA;
  color-scheme: light;
}

/* No-JS fallback: honor the OS preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ground: #FBFAF7;
    --text: #111A27;
    --text-2: #5C6675;
    --accent: #0F766E;
    --hairline: #D7DCE4;
    --exhibit-ground: #F2F0EA;
    color-scheme: light;
  }
}