/* Design tokens — single source of truth. Light theme defaults live on :root
   so the light theme is the "no attribute" state. Dark and parchment overrides
   are in themes.css. No literal color names; semantic roles only. */

:root {
  color-scheme: light;

  /* Surfaces */
  --surface-0: #ffffff;
  --surface-1: #f7f7f5;
  --surface-2: #f1f1ef;
  --surface-hover: rgba(55, 53, 47, 0.04);
  --surface-active: rgba(55, 53, 47, 0.08);
  --code-bg: #f7f6f3;

  /* Text */
  --text: #37352f;
  --text-muted: #6b6964; /* darkened from #787774 for WCAG AA (4.48→5.1) */
  --text-faint: #b4b4b0;

  /* Borders */
  --border: #e9e9e7;
  --border-strong: #d3d3d0;

  /* Semantic colors + ~10% subtle fills.
     Light-theme values darkened from the design guide verbatim to pass
     WCAG AA body-text contrast (4.5:1) on BOTH the white --surface-0 AND
     the --*-subtle tinted background used by .badge--* / .alert--*. */
  --accent: #0c6585;          /* was #2eaadc (2.66:1); now ~5.9:1 on subtle */
  --accent-subtle: rgba(12, 101, 133, 0.10);
  --danger: #a51e1e;          /* was #eb5757; ~5.9:1 on subtle */
  --danger-subtle: rgba(165, 30, 30, 0.10);
  --success: #276f30;         /* was #4daa57; ~5.4:1 on subtle */
  --success-subtle: rgba(39, 111, 48, 0.10);
  --warning: #7a5712;         /* was #cb912f; ~5.8:1 on subtle */
  --warning-subtle: rgba(122, 87, 18, 0.10);
  --shadow: rgba(15, 15, 15, 0.04);

  /* Typography — identical across all three themes */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 28px;
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 14px;
  --fs-caption: 12px;
  --fs-code: 13px;

  --lh-body: 1.65;
  --lh-heading: 1.3;

  --ls-heading: -0.02em;
  --ls-label: 0.08em;

  /* Spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  /* Motion */
  --dur-fast: 100ms;
  --dur: 150ms;
  --dur-med: 200ms;
  --dur-slow: 250ms;
  --ease: ease;

  /* Layout */
  --content-text: 720px;
  --content-mixed: 960px;
  --sidebar-w: 220px;
  --topbar-h: 56px;
}