/*
 * デザイントークン（SPEC 6「デザイン」）
 * すべての色・文字・間隔・動きはここで定義し、他のCSSは変数だけを参照する。
 * ライト／ダークは prefers-color-scheme に従い、data-theme 属性で強制もできる（投影画面用）。
 * コントラスト比は本文・補助文字・状態色いずれも地色に対して 4.5:1 以上になるよう選んでいる。
 */
:root {
  color-scheme: light dark;

  /* 色：ベース */
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-2: #eeeff1;
  --color-text: #1b1f24;
  --color-text-muted: #5b6470;
  --color-border: #d9dce0;
  --color-border-strong: #8a929c;
  --color-track: #e3e5e8;

  /* 色：アクセント（1色。棒グラフの強調・主要ボタン） */
  --color-accent: #1f3a5f;
  --color-accent-hover: #2a4c7a;
  --color-accent-text: #ffffff;
  --color-accent-soft: #e6ecf4;

  /* 色：状態（彩度を抑えた緑・琥珀・赤） */
  --color-success: #2f6b4a;
  --color-success-soft: #e4efe8;
  --color-warning: #7d5a1c;
  --color-warning-soft: #f4ebd8;
  --color-danger: #9b3b3b;
  --color-danger-soft: #f3e3e3;

  --color-focus: #1f3a5f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --overlay: rgba(27, 31, 36, 0.5);

  /* 文字 */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-proj-question: 48px;
  --text-proj-option: 32px;
  --leading: 1.6;

  /* 間隔（4px基準） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* 形 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --tap-min: 48px;
  --header-h: 56px;
  --content-max: 720px;
  --content-max-wide: 1100px;

  /* 動き：素早く始まり静かに止まる。跳ね返りは使わない */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-chart: 500ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ダーク：濃紺グレー地。アクセントはコントラスト確保のため明るい紺にし、その上の文字は濃色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #12161c;
    --color-surface: #1a2029;
    --color-surface-2: #222a35;
    --color-text: #e8eaed;
    --color-text-muted: #a2a9b3;
    --color-border: #2c343f;
    --color-border-strong: #5b6470;
    --color-track: #2a323d;

    --color-accent: #7fa1d1;
    --color-accent-hover: #93b2dc;
    --color-accent-text: #0e1622;
    --color-accent-soft: #223350;

    --color-success: #7fc29b;
    --color-success-soft: #1f3529;
    --color-warning: #d9b267;
    --color-warning-soft: #3a2f16;
    --color-danger: #e08a8a;
    --color-danger-soft: #3d2222;

    --color-focus: #7fa1d1;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --overlay: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --color-bg: #12161c;
  --color-surface: #1a2029;
  --color-surface-2: #222a35;
  --color-text: #e8eaed;
  --color-text-muted: #a2a9b3;
  --color-border: #2c343f;
  --color-border-strong: #5b6470;
  --color-track: #2a323d;

  --color-accent: #7fa1d1;
  --color-accent-hover: #93b2dc;
  --color-accent-text: #0e1622;
  --color-accent-soft: #223350;

  --color-success: #7fc29b;
  --color-success-soft: #1f3529;
  --color-warning: #d9b267;
  --color-warning-soft: #3a2f16;
  --color-danger: #e08a8a;
  --color-danger-soft: #3d2222;

  --color-focus: #7fa1d1;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --overlay: rgba(0, 0, 0, 0.6);
}

/* 動きを減らす設定のときは即時に切り替える */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-chart: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}