/* Legacy: the Norm-era names the pages still use (John's ruling C2, 2026-10-06). Norm is
   retired; the look comes from /tokens.css, generated from the Klartext design skill. The
   colours and the two font stacks here map onto tokens, the select arrow is written out
   per theme, and the other names keep their Norm values until the pages move onto tokens.
   Temporary: each page PR moves its page onto the tokens and deletes the names no page
   uses any more (tests/design.test.mjs fails on an unused name, and on a name /tokens.css
   also defines). Add no new names here. Pages link this file after /tokens.css. */

/* Colour: Norm's names mapped onto the tokens (the table approved in PR 2). Wrong is the
   token --wrong itself, and amber is gone: its last uses now say --accent. */
:root{
  --ink:var(--text);
  --paper:var(--bg);
  --steel:var(--border);
  --slate:var(--text-muted);
  --dim:var(--text-muted);
  --correct:var(--accent);
  --caution:var(--focus);
}

/* Select chevron. A data URI can't read var(), so its stroke is --text written out per
   theme, with the same three selectors /tokens.css uses. On paper it is the light theme's,
   as tokens.css prints. Under forced colours (Windows High Contrast) the field takes the
   system's contrast theme, so the chevron follows that, as the logo does, whatever theme
   is stored: :root:root outweighs the theme and print selectors, and comes after the
   system-light one, which weighs the same. */
:root, [data-theme="dark"]{ --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E8EAED' stroke-width='2'/%3E%3C/svg%3E"); }
[data-theme="light"]{ --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312161C' stroke-width='2'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light){
  :root:not([data-theme]){ --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312161C' stroke-width='2'/%3E%3C/svg%3E"); }
}
@media print{
  :root, [data-theme]{ --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312161C' stroke-width='2'/%3E%3C/svg%3E"); }
}
@media (forced-colors: active) and (prefers-color-scheme: dark){
  :root:root{ --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E8EAED' stroke-width='2'/%3E%3C/svg%3E"); }
}
@media (forced-colors: active) and (prefers-color-scheme: light){
  :root:root{ --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312161C' stroke-width='2'/%3E%3C/svg%3E"); }
}

:root{
  /* Type: families, now the tokens' Barlow and Red Hat Mono stacks */
  --sans:var(--font-sans);
  --mono:var(--font-mono);

  /* Type: sizes, named by their px value at a 16px root.
     --fs-base stays in px on purpose: body has always been 16px, not 1rem. */
  --fs-base:16px;
  --fs-11:.6875rem; --fs-12:.75rem;   --fs-13:.8125rem; --fs-14:.875rem;
  --fs-15:.9375rem; --fs-16:1rem;     --fs-17:1.0625rem; --fs-18:1.125rem;
  --fs-19:1.1875rem; --fs-20:1.25rem; --fs-22:1.375rem; --fs-24:1.5rem;
  --fs-32:2rem;     --fs-36:2.25rem;  --fs-40:2.5rem;   --fs-48:3rem;

  /* Type: weights. Barlow ships 400 to 700, so 800 and 900 draw at 700. */
  --fw-regular:400; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-black:900;

  /* Type: line height */
  --lh-solid:1; --lh-heading:1.05; --lh-button:1.2; --lh-question:1.32;
  --lh-note:1.45; --lh-body:1.5; --lh-reading:1.55;

  /* Type: letter spacing */
  --track-display:-.02em; --track-h2:-.015em; --track-question:-.005em;
  --track-mono-sm:.02em; --track-mono:.04em; --track-mono-lg:.06em;
  --track-caps-sm:.1em; --track-caps:.12em; --track-caps-lg:.14em;

  /* Spacing, named by px value. Norm's --space-N, renamed --px-N so nothing collides with
     the tokens' --space-1 to --space-8. */
  --px-2:2px;   --px-4:4px;   --px-6:6px;   --px-8:8px;
  --px-9:9px;   --px-10:10px; --px-12:12px; --px-13:13px;
  --px-14:14px; --px-16:16px; --px-18:18px; --px-20:20px;
  --px-22:22px; --px-24:24px; --px-28:28px; --px-32:32px;
  --px-40:40px; --px-48:48px; --px-52:52px; --px-56:56px;
  --px-72:72px;

  /* Offsets for focus rings and link underlines */
  --focus-offset:2px; --underline-offset:3px;
}