/* Design tokens: colors, type and spacing shared by the page. Dark by default; light follows the system setting. */

:root {
  /* color — dark (default) */
  --bg0: #0f1115;      /* page background */
  --bg1: #161a22;      /* card / panel */
  --bg2: #1f2430;      /* raised / hover */
  --ink: #e8eaf0;      /* primary text */
  --muted: #9aa3b2;    /* secondary text */
  --line: #2a3140;     /* borders / hairlines */
  --accent: #6ea8fe;   /* links, focus, primary actions */
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;

  /* type — generous & high-contrast by default (legibility rule: lean larger) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --fs-0: 1rem;        /* body floor — never smaller for body text */
  --fs-1: 1.125rem;
  --fs-2: 1.375rem;
  --fs-3: 1.75rem;
  --lh: 1.6;

  /* shape */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --gap: 1rem;
  --pad: 1.25rem;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg0: #f7f8fa; --bg1: #ffffff; --bg2: #eef1f5;
    --ink: #1b2330; --muted: #5a6474; --line: #d8dde5;
    --accent: #2563eb; --ok: #16a34a; --warn: #b45309; --err: #dc2626;
    --shadow: 0 2px 10px rgba(20, 30, 50, .10);
    color-scheme: light;
  }
}

/* explicit override always wins over the media query, both directions */
:root[data-theme="dark"] {
  --bg0: #0f1115; --bg1: #161a22; --bg2: #1f2430;
  --ink: #e8eaf0; --muted: #9aa3b2; --line: #2a3140;
  --accent: #6ea8fe; --ok: #4ade80; --warn: #fbbf24; --err: #f87171;
  --shadow: 0 2px 12px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg0: #f7f8fa; --bg1: #ffffff; --bg2: #eef1f5;
  --ink: #1b2330; --muted: #5a6474; --line: #d8dde5;
  --accent: #2563eb; --ok: #16a34a; --warn: #b45309; --err: #dc2626;
  --shadow: 0 2px 10px rgba(20, 30, 50, .10);
  color-scheme: light;
}

/* minimal base — enough that a page using only tokens.css already looks intentional */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  line-height: var(--lh);
}
a { color: var(--accent); }
code, pre { font-family: var(--font-mono); }
/* Long unbroken tokens (sha256, build ids) overflow at 390px; guard by context (2026-09-04b#A4). */
body { overflow-wrap: break-word; }            /* prose: break only when a word cannot fit */
:not(pre) > code { overflow-wrap: anywhere; }  /* inline code: break anywhere */
pre { overflow-x: auto; }                       /* block code: scroll, never break lines */