/* Design tokens. One source of truth for color, type, spacing, layout.
   Monochrome chrome only; product colors are never UI theme colors. */
:root {
  /* Color */
  --paper: #FFFFFF;
  --paper-alt: #FAFAF8;
  --ink: #111111;
  --ink-soft: #555555;
  --rule: #E5E5E5;
  --rule-strong: #111111;

  /* Fonts (self-hosted, see fonts.css) */
  --font-grotesk: 'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (fluid; ~15-20% smaller on mobile via clamp) */
  --t-display: clamp(2.75rem, 6.2vw, 6rem);   /* 44 -> 96 / 1.02 */
  --t-h1: clamp(2rem, 4vw, 3rem);             /* 32 -> 48 */
  --t-h2: clamp(1.5rem, 3vw, 2rem);           /* 24 -> 32 */
  --t-h3: 1.375rem;                            /* 22 */
  --t-body: 1.0625rem;                         /* 17 */
  --t-editorial: 1.1875rem;                    /* 19 */
  --t-meta: 0.8125rem;                         /* 13 */
  --t-mono: 0.9375rem;                         /* 15 */

  /* Spacing scale (no off-scale values) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-40: 160px;

  /* Layout — one shared width for header, all content and footer (.wrap). */
  --maxw: 1200px;
  --measure: 720px;
  --gutter: 24px;
  --margin: 24px;

  /* One accent behavior: a product's own color, set per product page. */
  --accent: var(--ink);
}
@media (min-width: 768px) { :root { --margin: 48px; } }