@layer base {
  :root {
    --color-ink: #1c2430;
    --color-muted: #5b6676;
    --color-line: #dde2e8;
    --color-surface: #ffffff;
    --color-canvas: #f4f6f8;
    --color-brand: #e2552b;
    --color-brand-ink: #ffffff;
    --color-success: #1f7a4d;
    --color-success-bg: #e3f4ea;
    --color-warning: #8a5a00;
    --color-warning-bg: #fff3d6;
    --color-danger: #b42318;
    --color-danger-bg: #fde8e7;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 0.5rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --tap: 2.75rem; /* minimum touch target */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-ink: #e8ecf1;
      --color-muted: #a3adba;
      --color-line: #2e3744;
      --color-surface: #1a212b;
      --color-canvas: #11161d;
      --color-success-bg: #12301f;
      --color-warning-bg: #33270a;
      --color-danger-bg: #3a1513;
      --color-success: #6fd3a0;
      --color-warning: #f0c060;
      --color-danger: #ff8a80;
    }
  }

  body { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-canvas); }
  h1 { font-size: 1.5rem; line-height: 1.2; margin-block-end: var(--space-4); }
  h2 { font-size: 1.2rem; margin-block: var(--space-6) var(--space-3); }
  a { color: var(--color-brand); }
  code { font-size: 0.9em; padding: 0 var(--space-1); background: var(--color-canvas); border-radius: 0.25rem; }
  small { font-size: 0.85rem; }
}