/* Preread — tokens.css
   Direction: Notebook · 2a type (mono structure, sans reading) · 4b pure white. Ink only. System-default light/dark.
   Semantic names; components never reference raw hex. */

:root {
  color-scheme: light dark;

  /* ---- Colour: light ---- */
  --color-bg: #ffffff;            /* page */
  --color-surface: #ffffff;       /* same as page: cards are rules, not fills */
  --color-wash: #f7f7f6;          /* top band of a brief */
  --color-surface-sunken: #f3f3f2;/* code, private commentary, dry-run panel */
  --color-fg: #111110;            /* body text */
  --color-fg-muted: #66655f;      /* metadata, gutter index, secondary */
  --color-fg-faint: #a3a29c;      /* placeholders, disabled */
  --color-rule: #e3e3e1;          /* hairlines */
  --color-rule-strong: #111110;   /* emphasis rules, primary button */
  --color-link: #111110;          /* links are ink, underlined */
  --color-selection: #e3e3e1;
  --color-focus: #111110;

  /* Status is expressed with marks + weight, not hue. One exception: failed. */
  --color-danger: #8a2a1d;

  /* ---- Type ---- */
  /* Two voices from one family. Mono = structure (headings, index,
     metadata, UI labels, code). Sans = reading. */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --font-heading: var(--font-mono);
  --font-body: var(--font-sans);
  --font-ui: var(--font-mono);

  --text-xs: 11px;    /* mono: gutter index, dates, footer */
  --text-sm: 12px;    /* mono: badges, table meta, buttons */
  --text-base: 15px;  /* sans: body */
  --text-md: 17px;    /* sans: lede, marketing body */
  --text-h3: 13px;    /* mono 500, uppercase, tracked */
  --text-h2: 13px;    /* mono 500, uppercase, tracked (section heading) */
  --text-h1: 20px;    /* mono 500, page title (phone) */
  --text-display: 32px; /* mono 500, marketing headline (phone) */

  --leading-tight: 1.15;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: -0.01em;    /* h1, display */
  --tracking-label: 0.06em;       /* uppercase h2/h3 */
  --tracking-body: 0;

  --weight-heading: 500;
  --weight-body: 400;
  --weight-strong: 500;    /* strong is 500 in both families; never 700 */

  /* ---- Layout ---- */
  --gutter: 28px;          /* the margin index column (phone) — fits "CEST" at 11px mono */
  --gutter-gap: 10px;
  --page-pad: 20px;
  --measure: 62ch;         /* max body width */
  --content-max: 720px;    /* brief, review, editors */
  --app-max: 1120px;       /* queue, library on desktop */

  /* ---- Spacing (4-based) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --section-gap: 26px;     /* between brief sections (phone) */

  /* ---- Radii ---- */
  --radius-0: 0;           /* default: everything is square */
  --radius-1: 2px;         /* inputs, textareas, buttons */
  --radius-round: 999px;   /* status dot only */

  /* ---- Borders ---- */
  --border-hair: 1px solid var(--color-rule);
  --border-strong: 1px solid var(--color-rule-strong);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  /* ---- Motion ---- */
  --dur-fast: 120ms;       /* hover, focus, pressed */
  --dur-base: 240ms;       /* status change, expand */
  --dur-slow: 400ms;       /* approve, version tick, page-level */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);

  /* ---- Touch ---- */
  --tap-min: 44px;

  /* ---- Glyphs (iconography = typography) ---- */
  --glyph-brand: '¶';
  --glyph-question: '?';
  --glyph-arrow: '→';
  --glyph-skip: '×';
  --glyph-check: '✓';
  --glyph-bullet: '·';
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f0e;
    --color-surface: #181817;
    --color-wash: #141413;
    --color-surface-sunken: #0a0a0a;
    --color-fg: #f0efec;
    --color-fg-muted: #8b8a84;
    --color-fg-faint: #575651;
    --color-rule: #2b2b29;
    --color-rule-strong: #f0efec;
    --color-link: #f0efec;
    --color-selection: #2b2b29;
    --color-focus: #f0efec;
    --color-danger: #d9806f;
  }
}

/* Explicit override for testing: <html data-theme="dark"> */
[data-theme="dark"] {
  --color-bg: #0f0f0e; --color-surface: #181817; --color-wash: #141413; --color-surface-sunken: #0a0a0a;
  --color-fg: #f0efec; --color-fg-muted: #8b8a84; --color-fg-faint: #575651;
  --color-rule: #2b2b29; --color-rule-strong: #f0efec; --color-link: #f0efec;
  --color-selection: #2b2b29; --color-focus: #f0efec; --color-danger: #d9806f;
}
[data-theme="light"] {
  --color-bg: #ffffff; --color-surface: #ffffff; --color-wash: #f7f7f6; --color-surface-sunken: #f3f3f2;
  --color-fg: #111110; --color-fg-muted: #66655f; --color-fg-faint: #a3a29c;
  --color-rule: #e3e3e1; --color-rule-strong: #111110; --color-link: #111110;
  --color-selection: #e3e3e1; --color-focus: #111110; --color-danger: #8a2a1d;
}

/* Desktop: denser, not different. */
@media (min-width: 900px) {
  :root {
    --text-base: 15px;
    --text-h1: 24px;
    --text-display: 44px;
    --gutter: 96px;
    --gutter-gap: 24px;
    --page-pad: 32px;
    --section-gap: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}