/* Design tokens — color, type, spacing. Defined on bare :root first,
   then redefined for OS dark mode and for an explicit data-theme choice. */
:root {
  /* --- color: light (default) --- */
  --ink: #1c2126;
  --ink-muted: #5b6470;
  --ink-faint: #8b93a0;
  --paper: #f5f4f0;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --line: #e1e0da;
  --line-strong: #c9c8c0;
  --accent: #14616b;
  --accent-strong: #0c474f;
  --accent-soft: #e2eeee;
  --accent-ink: #ffffff;
  --amber: #b9791f;
  --amber-soft: #f6ead2;
  --good: #2f7d5a;
  --good-soft: #e1f0e6;
  --danger: #b3454b;
  --danger-soft: #f5e2e2;
  --shadow-color: 220 20% 20%;

  /* --- type --- */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2rem;

  /* --- spacing / shape --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --nav-w: 232px;
  --topbar-h: 56px;
  --bottombar-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ecebe6;
    --ink-muted: #a9b0b8;
    --ink-faint: #767e88;
    --paper: #16191c;
    --surface: #1d2124;
    --surface-raised: #23282c;
    --line: #33383c;
    --line-strong: #454b50;
    --accent: #4fb3ab;
    --accent-strong: #7ecfc7;
    --accent-soft: #1f3336;
    --accent-ink: #0b1213;
    --amber: #dba75a;
    --amber-soft: #3a2f1a;
    --good: #6cbf93;
    --good-soft: #1c2f24;
    --danger: #e0898d;
    --danger-soft: #3a2225;
    --shadow-color: 220 30% 2%;
  }
}

:root[data-theme="dark"] {
  --ink: #ecebe6;
  --ink-muted: #a9b0b8;
  --ink-faint: #767e88;
  --paper: #16191c;
  --surface: #1d2124;
  --surface-raised: #23282c;
  --line: #33383c;
  --line-strong: #454b50;
  --accent: #4fb3ab;
  --accent-strong: #7ecfc7;
  --accent-soft: #1f3336;
  --accent-ink: #0b1213;
  --amber: #dba75a;
  --amber-soft: #3a2f1a;
  --good: #6cbf93;
  --good-soft: #1c2f24;
  --danger: #e0898d;
  --danger-soft: #3a2225;
  --shadow-color: 220 30% 2%;
}