/* Non-color design tokens.
 *
 * Color tokens have moved to:
 *   - `tokens-light.css` — semantic color tokens for light mode
 *   - `tokens-dark.css`  — dark-mode overrides, scoped to
 *                          `:root[data-theme="dark"]`
 *
 * The split is part of Phase 5 M-P1 (design-token foundation). Keep
 * spacing, layout, typography, radii, breakpoints, and mobile-chrome
 * values here — anything that doesn't change between light + dark.
 */

:root {
  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-doc-heading: 'Inter', system-ui, sans-serif;
  --font-doc-body: 'Inter', system-ui, sans-serif;

  /* Spacing */
  --space-unit: 4px;
  --space-xs: calc(var(--space-unit) * 1);
  --space-sm: calc(var(--space-unit) * 2);
  --space-md: calc(var(--space-unit) * 4);
  --space-lg: calc(var(--space-unit) * 6);
  --space-xl: calc(var(--space-unit) * 8);

  /* Layout */
  /* Editor column width on wide screens. 720px is the classic prose-
   * readability ceiling (~80 chars), but it leaves wide screens with
   * substantial empty bands on either side and squeezes tables, code
   * blocks, and side-by-side content. 1080px (~110 chars) is the
   * upper end of comfortable prose width while giving meaningful
   * canvas room for wider content. Tightens automatically on tablet
   * via `.editor-content` padding rules in responsive.css. */
  --content-max-width: 1080px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 48px;
  --toolbar-height: 44px;
  --outline-width: 220px;
  --conversation-width: 280px;

  /* Breakpoints (used in @media queries via plain values; tokens are for documentation/JS use) */
  --bp-mobile: 640px;
  --bp-tablet: 1024px;

  /* Mobile chrome */
  --mobile-toolbar-height: 44px;
  --mobile-drawer-width: 88vw;
  --touch-target-min: 44px;
  /* Used by mobile overlays (notification dropdown, comment popup) to
   * sit just below the doc-header. Tracks the header's effective
   * vertical footprint — keep in sync if `.doc-header` gains rows. */
  --mobile-header-offset: 56px;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* Document typography themes (#59 T-12, branding.md §Typography). A
 * user-selectable per-account preference: theme.rs writes
 * [data-doc-theme="<id>"] on the document element (mirroring
 * [data-dyslexic]), and these blocks re-point the --font-doc-* vars that
 * document surfaces read. "default" (Inter) needs no block — it is the
 * :root value above. @font-face for each family lives in fonts.css.
 *
 * Precedence: the dyslexic a11y override ([data-dyslexic="true"] in
 * main.css, which loads AFTER this file) must win over any doc theme at
 * equal specificity — accessibility outranks aesthetics. Keep these rules
 * in variables.css (early) so that ordering holds. */
[data-doc-theme="editorial"] {
  --font-doc-heading: 'Playfair Display', Georgia, serif;
  --font-doc-body: 'Source Serif 4', Georgia, serif;
}
[data-doc-theme="handwritten"] {
  --font-doc-heading: 'Caveat', 'Segoe Script', cursive;
  --font-doc-body: 'Nunito', system-ui, sans-serif;
}
[data-doc-theme="technical"] {
  --font-doc-heading: 'JetBrains Mono', ui-monospace, monospace;
  --font-doc-body: 'JetBrains Mono', ui-monospace, monospace;
}
[data-doc-theme="classic"] {
  --font-doc-heading: 'Merriweather', Georgia, serif;
  --font-doc-body: 'Merriweather', Georgia, serif;
}