/*
 * デザイントークン。色はすべて意味のある名前で定義する。
 * テーマ(Phase 21 PR1 → Phase 31 で 4 種に)は、このファイルの下部で、色・形のトークンを上書きする。
 * 切り替えは <html data-theme="light|white|dark|pretty|smart|system">(components/theme.js)。
 * light = デフォルト(この :root)・white = ホワイト・dark = ダーク(クール)・pretty = プリティ・smart = スマート。
 * 「システム」は、OSの設定(prefers-color-scheme)に追従する(ライト = デフォルト・ダーク = ダーク)。
 * 明示した light/white/dark/pretty/smart は、OSより優先。
 * ブレークポイント: 48rem(768px)以上をPC・タブレット横向きとする。
 */
:root {
  color-scheme: light;

  /* Color(ライト。既定) */
  --color-bg: #fffaf0;
  --color-surface: #fff;
  --color-text: #1b2033;
  --color-text-muted: #4a5068;
  --color-primary: #4b3fe0;
  --color-primary-strong: #3a2fc0;
  --color-on-primary: #fff;
  --color-accent: #ffd23f;
  --color-on-accent: #1b2033;
  --color-soft: #fff1b8;
  --color-border: #1b2033;
  --color-focus: #1b2033;

  /* モーダルなどの背景幕。暗く沈めるためだけの色なので、テーマが変わっても同じ */
  --color-backdrop: rgb(27 32 51 / 60%);

  /*
   * アーケード風のゲーム画面(Issue #166。game.css の .game-play)。どのテーマでも同じ、暗い画面。
   * テーマでは上書きしない(テストが、文字と背景の明るさの比を検査する)。
   * 場面(.scene)だけは、背景の絵が淡い色なので、明るい窓として、固定の明るい色を使う。
   */
  --arcade-bg: #0b0b1e;
  --arcade-panel: #16163a;
  --arcade-panel-2: #23235a;
  --arcade-text: #f4f4ff;
  --arcade-text-muted: #b9b9e0;
  --arcade-cyan: #5ee6ff;
  --arcade-yellow: #ffd84a;
  --arcade-green: #5cff9c;
  --arcade-red: #ff5470;
  --arcade-magenta: #ff4fd8;
  --arcade-on-bright: #0b0b1e;
  --arcade-glow: rgb(255 79 216 / 45%);
  --arcade-scene-top: #fff1b8;
  --arcade-scene-bottom: #fff;
  --arcade-scene-ink: #1b2033;
  --arcade-scene-text-muted: #4a5068;
  --arcade-scene-primary: #4b3fe0;
  --arcade-scene-accent: #ffd23f;
  --arcade-scene-light: rgb(255 255 255 / 75%);
  --arcade-scene-shade: rgb(27 32 51 / 14%);

  /* グラフ(グリッドは背景より一段だけ濃い実線のヘアライン。データより目立たせない) */
  --color-chart-grid: #e6e0d0;
  --color-chart-axis: #a9a391;

  /* Typography */
  --font-base:
    system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", meiryo, sans-serif;

  /* ゲームの数字・英字の見出し(自前の字体。同梱の Basic Latin だけ。読み込めない間・失敗時は、等幅の字体) */
  --font-display: "NOLITO Display", ui-monospace, sfmono-regular, menlo, consolas, monospace;
  --font-size-xs: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-base: 1.7;
  --line-height-tight: 1.3;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Shape */
  --border-width: 2px;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-pill: 999px;
  --shadow-pop: 0 4px 0 var(--color-border);
  --shadow-pop-sm: 0 2px 0 var(--color-border);
  --shadow-primary: 0 4px 0 var(--color-border);

  /* Layout */
  --container-max: 64rem;
  --header-height: 4rem;
  --tap-size: 2.75rem;
  --z-header: 100;
  --z-skip-link: 200;
}

/*
 * ダーク(クール)。濃い紺・水色。角が小さく、縁が光る。Phase 31 で、以前のダーク(暗い茶色)から置き換えた。
 * 「システム」で OS がダークのときも、同じ配色。
 * 配色は、WCAG AA(通常文字 4.5:1・UI部品 3:1)以上になるよう決めた(tests/theme.test.js で検査)。
 */
@media (prefers-color-scheme: dark) {
  :root:not(
    [data-theme="light"],
    [data-theme="white"],
    [data-theme="pretty"],
    [data-theme="smart"]
  ) {
    color-scheme: dark;

    --color-bg: #0b1220;
    --color-surface: #131d33;
    --color-text: #e6f1ff;
    --color-text-muted: #9db3d1;
    --color-primary: #22d3ee;
    --color-primary-strong: #67e8f9;
    --color-on-primary: #06202a;
    --color-accent: #a78bfa;
    --color-on-accent: #0b1220;
    --color-soft: #1b2a4a;
    --color-border: #4fb3d9;
    --color-focus: #22d3ee;
    --color-chart-grid: #1b2a4a;
    --color-chart-axis: #5f7ba3;
    --color-glow: rgb(34 211 238 / 35%);
    --border-width: 1px;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-pill: 0.375rem;
    --shadow-pop: 0 0 14px var(--color-glow);
    --shadow-pop-sm: 0 0 8px var(--color-glow);
    --shadow-primary: 0 0 16px var(--color-glow);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0b1220;
  --color-surface: #131d33;
  --color-text: #e6f1ff;
  --color-text-muted: #9db3d1;
  --color-primary: #22d3ee;
  --color-primary-strong: #67e8f9;
  --color-on-primary: #06202a;
  --color-accent: #a78bfa;
  --color-on-accent: #0b1220;
  --color-soft: #1b2a4a;
  --color-border: #4fb3d9;
  --color-focus: #22d3ee;
  --color-chart-grid: #1b2a4a;
  --color-chart-axis: #5f7ba3;
  --color-glow: rgb(34 211 238 / 35%);
  --border-width: 1px;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-pill: 0.375rem;
  --shadow-pop: 0 0 14px var(--color-glow);
  --shadow-pop-sm: 0 0 8px var(--color-glow);
  --shadow-primary: 0 0 16px var(--color-glow);
}

/*
 * ホワイト(Phase 31)。白と灰色・青。細い線とやわらかい影。
 */
:root[data-theme="white"] {
  color-scheme: light;

  --color-bg: #f6f7f9;
  --color-surface: #fff;
  --color-text: #1a1d23;
  --color-text-muted: #4b5563;
  --color-primary: #2563eb;
  --color-primary-strong: #1d4ed8;
  --color-on-primary: #fff;
  --color-accent: #e5e7eb;
  --color-on-accent: #1a1d23;
  --color-soft: #e8eefc;
  --color-border: #6b7280;
  --color-focus: #2563eb;
  --color-chart-grid: #e5e7eb;
  --color-chart-axis: #9ca3af;
  --color-shadow: rgb(15 23 42 / 14%);
  --border-width: 1px;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-pill: 0.5rem;
  --shadow-pop: 0 2px 8px var(--color-shadow);
  --shadow-pop-sm: 0 1px 3px var(--color-shadow);
  --shadow-primary: 0 2px 8px var(--color-shadow);
}

/*
 * プリティ(Phase 31)。ピンク・大きな丸み・やわらかい影。
 */
:root[data-theme="pretty"] {
  color-scheme: light;

  --color-bg: #fff0f6;
  --color-surface: #fff;
  --color-text: #4a2040;
  --color-text-muted: #7a3f68;
  --color-primary: #c2255c;
  --color-primary-strong: #a61e4d;
  --color-on-primary: #fff;
  --color-accent: #ffc9de;
  --color-on-accent: #4a2040;
  --color-soft: #ffe3ef;
  --color-border: #b0407a;
  --color-focus: #c2255c;
  --color-chart-grid: #f6d3e2;
  --color-chart-axis: #c98aa9;
  --color-shadow: #f4a6c8;
  --border-width: 3px;
  --radius-sm: 1rem;
  --radius-md: 1.5rem;
  --radius-pill: 999px;
  --shadow-pop: 0 5px 0 var(--color-shadow);
  --shadow-pop-sm: 0 2px 0 var(--color-shadow);
  --shadow-primary: 0 4px 0 var(--color-primary-strong);
}

/*
 * スマート(2026-10-04。決定 0091)。白と黒だけ。角のない矩形・細い黒い線・影なし。余白を広く見せる、ミニマルな配色。
 */
:root[data-theme="smart"] {
  color-scheme: light;

  --color-bg: #fff;
  --color-surface: #fff;
  --color-text: #111;
  --color-text-muted: #555;
  --color-primary: #111;
  --color-primary-strong: #333;
  --color-on-primary: #fff;
  --color-accent: #f0f0f0;
  --color-on-accent: #111;
  --color-soft: #f2f2f2;
  --color-border: #111;
  --color-focus: #111;
  --color-chart-grid: #e8e8e8;
  --color-chart-axis: #8a8a8a;
  --border-width: 1px;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 0;
  --shadow-pop: none;
  --shadow-pop-sm: none;
  --shadow-primary: none;
}

/*
 * サイト内文字サイズ(Phase 21 PR2)。--font-size-* は、すべて rem(ルートからの相対値)なので、
 * ルートの font-size を変えるだけで、サイト全体が連動して拡大する(個別のトークンは増やさない)。
 * 切り替えは <html data-font-size="large|xlarge">(components/font-size.js)。標準は属性なし。
 */
:root[data-font-size="large"] {
  font-size: 118.75%;
}

:root[data-font-size="xlarge"] {
  font-size: 137.5%;
}