/* デザイントークン(docs/design/ui/001-design-system.md セクション3.2・3.8)。
   色の値はこのファイルにだけ置く。ほかのCSSは var(--…) だけを使う。
   **1つのトークンにライトとダークの両方の値を light-dark(ライト, ダーク) で持つ**(値は1か所だけ)。
   どちらを使うかは color-scheme が決める:自動(既定)はOSの設定、手動は <html> の data-theme(layouts/_theme_init)。
   値を変えたら、設計書の「比」(WCAG 2.1のコントラスト比)を計算し直すこと。
   light-dark() は Chrome・Edge 123 / Safari 17.5 / Firefox 120 以降(設計 セクション3.2)。 */
:root {
  color-scheme: light dark; /* 自動(既定):OSの設定に従う */

  --bg: light-dark(#f6f7f9, #0e1116);
  --surface: light-dark(#ffffff, #161a22);
  --surface-subtle: light-dark(#f9fafb, #1b2029);
  --border: light-dark(#e5e7eb, #2a303c);
  --border-input: light-dark(#838a97, #6b7280);
  --text: light-dark(#111827, #e7e9ee);
  --text-muted: light-dark(#4b5563, #a8afbd);
  --text-faint: light-dark(#6b7280, #8b93a3);
  --accent: light-dark(#3451d1, #8aa4ff);
  --accent-hover: light-dark(#2a43b0, #a5b9ff);
  --accent-subtle: light-dark(#e8ecfd, #1f2a52);
  --on-accent: light-dark(#ffffff, #0e1116);
  --income: light-dark(#15803d, #4ade80);
  --expense: light-dark(#b91c1c, #f87171);

  --success-bg: light-dark(#dcfce7, #12301f);  --success-fg: light-dark(#14532d, #bbf7d0);
  --warning-bg: light-dark(#fef3c7, #3a2a0a);  --warning-fg: light-dark(#7c4a03, #fcd34d);
  --danger-bg: light-dark(#fee2e2, #3b1618);   --danger-fg: light-dark(#7f1d1d, #fecaca);
  --info-bg: light-dark(#dbeafe, #172a4d);     --info-fg: light-dark(#1e40af, #bfdbfe);
  --neutral-bg: light-dark(#e5e7eb, #2a303c);  --neutral-fg: light-dark(#1f2937, #e5e7eb);
  --case-bg: light-dark(#ede9fe, #2c2150);     --case-fg: light-dark(#5b21b6, #ddd6fe);
  --forecast-bg: light-dark(#eef2f8, #1b2029); --forecast-fg: light-dark(#5b6678, #a8b3c8);

  /* 損益推移の層の列の背景(速報=淡い面・見込=斜線の模様)。色だけに頼らず、模様でも区別する(設計 セクション5「段階3の設計」) */
  --layer-preliminary-bg: color-mix(in srgb, var(--info-bg) 35%, transparent);
  --layer-forecast-bg: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--forecast-fg) 12%, transparent) 6px 7px);

  /* light-dark()の引数は色だけ。影は、色と形に分ける */
  --shadow-color: light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
  --shadow: 0 4px 12px var(--shadow-color);

  /* 色以外のトークンは、切り替えに関係しないので、通常の値で持つ */
  --font-sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;

  --text-xs: 12px;  --text-sm: 13px;  --text-base: 14px;  --text-lg: 16px;  --text-xl: 20px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-6: 24px;  --space-8: 32px;  --space-12: 48px;

  --radius-sm: 4px;  --radius: 6px;  --radius-lg: 10px;

  /* 固定(sticky)する帯の高さ。ヘッダー+サブナビの合計が --header-h。 */
  --app-header-h: 56px;
  --app-subnav-h: 40px;
  --header-h: calc(var(--app-header-h) + var(--app-subnav-h));
  --page-gutter: var(--space-6);
}

/* 手動:<html>のdata-themeが、color-schemeを1つに固定する(保存は localStorage の theme。theme_toggle.js) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (max-width: 699px) {
  :root { --page-gutter: var(--space-4); }
}