:root {
  /* Colors — paper, ink, gray, accent, and secondaries */
  --color-paper: oklch(98.4% 0.003 90);   /* #FAF9F6 */
  --color-ink: oklch(15.5% 0.004 90);     /* #111110 */
  --color-gray: oklch(60% 0.011 80);      /* #8A887F */
  --color-accent: oklch(85.5% 0.16 88);   /* #FFD23F */

  --color-background: var(--color-paper);
  --color-foreground: var(--color-ink);
  --color-muted: var(--color-gray);
  --color-border: oklch(from var(--color-ink) l c h / 12%);
  --color-surface: oklch(100% 0 0);
  --color-raised: var(--color-surface);
  --color-signal: var(--color-accent);
  --color-alert: oklch(55% 0.2 25);

  /* Spacing scale */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Typography */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.5rem;
  --line-height-tight: 1.15;
  --line-height-base: 1.5;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 6%);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 8%);
  --shadow-lg: 0 12px 32px oklch(0% 0 0 / 12%);

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;

  /* Focus ring */
  --focus-ring-color: var(--color-accent);
  --focus-ring: 0 0 0 3px oklch(from var(--focus-ring-color) l c h / 55%);

  /* Safe area insets — the iOS bridge overrides these without touching CSS */
  --injected-safe-inset-top: env(safe-area-inset-top, 0px);
  --injected-safe-inset-right: env(safe-area-inset-right, 0px);
  --injected-safe-inset-bottom: env(safe-area-inset-bottom, 0px);
  --injected-safe-inset-left: env(safe-area-inset-left, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: oklch(11% 0.006 60);
    --color-ink: oklch(95% 0.008 85);
    --color-gray: oklch(64% 0.008 75);
    --color-surface: oklch(15.5% 0.006 60);
    --color-raised: oklch(15.5% 0.006 60);
    --color-border: oklch(24% 0.005 60);
    --color-signal: oklch(76% 0.155 62);
    --color-alert: oklch(55% 0.19 27);
  }
}

:root[data-theme="dark"] {
  --color-paper: oklch(11% 0.006 60);
  --color-ink: oklch(95% 0.008 85);
  --color-gray: oklch(64% 0.008 75);
  --color-surface: oklch(15.5% 0.006 60);
  --color-raised: oklch(15.5% 0.006 60);
  --color-border: oklch(24% 0.005 60);
  --color-signal: oklch(76% 0.155 62);
  --color-alert: oklch(55% 0.19 27);
}