/* Design tokens — one source of truth for type, color, space, and shape.
   Light is the default (white background, off-black text). Dark overrides the
   same custom properties, applied for the system preference and for an explicit
   [data-theme] toggle. */

:root {
  /* Typefaces */
  --font-serif: "Source Serif 4 Variable", Charter, Georgia, "Times New Roman",
    serif;
  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Fluid type scale */
  --fs-hero: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  --fs-h1: clamp(2rem, 1.65rem + 1.5vw, 2.9rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --fs-h4: 1.05rem;
  --fs-lead: clamp(1.1rem, 1.02rem + 0.45vw, 1.32rem);
  --fs-body: 1rem;
  --fs-ui: 0.9rem;
  --fs-small: 0.82rem;
  --fs-code: 0.9rem;
  --fs-code-lg: clamp(0.92rem, 0.86rem + 0.28vw, 1.08rem);

  /* Line heights */
  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-normal: 1.62;

  /* Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Layout widths */
  --measure: 43rem;
  --container: 74rem;
  --container-narrow: 52rem;
  --sidebar-w: 16rem;
  --toc-w: 13rem;

  /* Shape */
  --radius: 6px;
  --radius-lg: 10px;
  --border: 1px solid var(--rule);

  /* Color — light (default) */
  --bg: #ffffff;
  --bg-subtle: #f7f7f4;
  --bg-code: #f6f8f6;
  --bg-inline-code: #eef1ee;
  --ink: #16181d;
  --ink-soft: #3b3f47;
  --muted: #6a6f78;
  --faint: #9195a0;
  --rule: #e7e7e2;
  --rule-strong: #d6d6cf;
  --accent: #12684a;
  --accent-ink: #0d5138;
  --accent-soft: rgba(18, 104, 74, 0.09);
  --warning: #9a5b00;
  --warning-soft: rgba(154, 91, 0, 0.08);
  --selection: rgba(18, 104, 74, 0.16);
  --shadow-card: 0 1px 2px rgba(20, 24, 28, 0.04),
    0 8px 24px -12px rgba(20, 24, 28, 0.12);

  color-scheme: light;
}

/* Dark theme — system preference (unless the user forced light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1113;
    --bg-subtle: #14181b;
    --bg-code: #14181b;
    --bg-inline-code: #1c2226;
    --ink: #e6e8e4;
    --ink-soft: #bcc0ba;
    --muted: #8b918b;
    --faint: #6a716b;
    --rule: #232a2c;
    --rule-strong: #323b3d;
    --accent: #52c491;
    --accent-ink: #6ed3a5;
    --accent-soft: rgba(82, 196, 145, 0.13);
    --warning: #e0a95e;
    --warning-soft: rgba(224, 169, 94, 0.12);
    --selection: rgba(82, 196, 145, 0.22);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3),
      0 10px 28px -14px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

/* Dark theme — explicit toggle (wins in both directions) */
:root[data-theme="dark"] {
  --bg: #0e1113;
  --bg-subtle: #14181b;
  --bg-code: #14181b;
  --bg-inline-code: #1c2226;
  --ink: #e6e8e4;
  --ink-soft: #bcc0ba;
  --muted: #8b918b;
  --faint: #6a716b;
  --rule: #232a2c;
  --rule-strong: #323b3d;
  --accent: #52c491;
  --accent-ink: #6ed3a5;
  --accent-soft: rgba(82, 196, 145, 0.13);
  --warning: #e0a95e;
  --warning-soft: rgba(224, 169, 94, 0.12);
  --selection: rgba(82, 196, 145, 0.22);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3),
    0 10px 28px -14px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}