:root {
  /* ── Primary ── */
  --accent: #4A6FA5;
  --accent-soft: rgba(74, 111, 165, .08);
  --accent-hover: #3D5F8F;

  /* ── Warm ── */
  --warm: #C17F3E;
  --warm-soft: rgba(193, 127, 62, .08);

  /* ── Semantic ── */
  --green: #2B7A4B;
  --green-soft: rgba(43, 122, 75, .10);
  --red: #C53030;
  --red-soft: rgba(197, 48, 48, .06);
  --yellow: #B7791F;
  --yellow-soft: rgba(183, 121, 31, .08);

  /* ── Surface ── */
  --bg: #F7F6F4;
  --surface: #FFFFFF;
  --surface-alt: #EDECE9;
  --border: #D5D2CC;

  /* ── Text ── */
  --text: #1C1E21;
  --text-muted: #6B7280;
  --text-inv: #F0F1F3;

  /* ── Header ── */
  --header-bg: #1A2332;
  --header-text: #E8EAF0;

  /* ── Typography ── */
  --font-sans: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --text-base: .875rem;
  --leading: 1.75;

  /* ── Spacing ── */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ── Layout ── */
  --side-w: 260px;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* ── Dark（OSの設定に追従） ── */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6B9BD2;
    --accent-soft: rgba(107, 155, 210, .12);
    --accent-hover: #82ADE0;

    --warm: #D4A76A;
    --warm-soft: rgba(212, 167, 106, .12);

    --green: #68D391;
    --green-soft: rgba(104, 211, 145, .10);
    --red: #F56565;
    --red-soft: rgba(245, 101, 101, .10);
    --yellow: #ECC94B;
    --yellow-soft: rgba(236, 201, 75, .10);

    --bg: #111820;
    --surface: #182030;
    --surface-alt: #1F2A3C;
    --border: #2A3A50;

    --text: #E2E6EB;
    --text-muted: #7D8FA2;
    --text-inv: #1C1E21;

    --header-bg: #0B1018;
    --header-text: #E2E6EB;
  }
}