:root {
  /* フォントサイズと行間 (utils/font-size.ts の applyFontSize がセットで書き換える)。
     行間は基準 + そこから詰めた 3 段。 用途で選ぶ:
     tight = 1 件が短く件数が多いもの / normal = 一覧の抜粋・コメント・モバイル本文 /
     relaxed = まとまった文章 */
  --base-font-size: 16px;
  --base-line-height: 1.7;
  --line-height-tight: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  color-scheme: light;

  /* プリミティブカラー */
  --color-accent-base: #a4b2dd;
  --color-accent-strong: #7986cb;
  --color-accent-hover: #8fa3e3;
  --color-accent-rgb: 168, 184, 232;

  /* セマンティックカラー */
  --color-accent: var(--color-accent-base);
  --color-accent-text: var(--color-accent-base);
  --color-accent-bg: var(--color-accent-base);
  --color-accent-border: var(--color-accent-base);
  --color-primary: var(--color-accent-strong);

  /* ベースカラー */
  --color-bg: #f5f6f8;
  --color-bg-rgb: 245, 246, 248;
  --color-surface: #fafbfc;
  --color-border: #d1d5db;
  --color-text: #2c3e50;
  --color-muted: #7f8c8d;
  --color-target: #e8f0ff;
  --color-self: #f0f4ff;
  --color-surface-alt: #f0f2f5;
  --color-text-secondary: #596275;
  --color-link: #2563eb;
  --color-status-warn: #969696;
  --color-status-ok: #27ae60;
  --color-status-off: #e74c3c;
  --color-status-error: #d57272;
  --color-status-error-rgb: 213, 114, 114;
  --color-text-tertiary: #8a94a6;
  --color-button-text: #ffffff;
  --color-icon: #666666;

  /* コードブロック */
  --color-code-bg: rgba(0, 0, 0, 0.06);
  --color-code-text: #1a1a1a;

  /* アクションカラー */
  --color-danger: #d07d7d;
  --color-danger-hover: #a76b6b;
  --color-warning: #ffc107;
  --color-warning-hover: #e0a800;
  /* B-致命-1 (2026-05-17): 機能色変数を semantic 層で正式定義 (旧 fallback 散在を解消) */
  --color-success: #27ae60;
  --color-success-hover: #229954;
  --color-error: #e74c3c;
  --color-error-hover: #c0392b;
  --color-info: #2980b9;
  --color-info-hover: #1f6390;

  /* B-致命-2 (2026-05-17): タッチターゲット最小値 (WCAG 2.5.5 AAA = 44x44px) */
  --touch-target-min: 44px;

  /* タスクステータスカラー */
  --color-task-open: #9ba4b5;
  --color-task-active: #8b9dc3;
  --color-task-done: #7dab8e;
  --color-task-due-overdue: #c97070;
  --color-task-due-soon: #6bab7d;

  /* アニメーション・レイアウト */
  --animation-duration: 0.2s;
  --message-motion-duration: 0s;
  --border-radius: 12px;
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);

  /* アプリ更新通知バー（ライト/ダーク共通の数値・レイアウト） */
  /* 表示中のみ JS で 40px に切り替え。fixed/sticky 要素の top 計算に使う */
  --app-update-bar-height: 0px;
  /* 既存 z-index 階層: 再認証モーダル 10500 / 通知ポップアップ 10300 / image-editor 10200 / popup-overlay 10100 / ヘッダー 100 */
  --z-app-update-bar: 10150;
}

.theme-dark {
  color-scheme: dark;

  /* プリミティブカラー */
  --color-accent-base: #7282bb;
  --color-accent-strong: #8298e7;
  --color-accent-hover: #8091d4;
  --color-accent-rgb: 114, 130, 187;

  /* セマンティックカラー */
  --color-accent: var(--color-accent-base);
  --color-accent-text: var(--color-accent-base);
  --color-accent-bg: var(--color-accent-strong);
  --color-accent-border: var(--color-accent-base);

  /* ベースカラー */
  --color-bg: #1c1d24;
  --color-bg-rgb: 28, 29, 36;
  --color-surface: #22252d;
  --color-border: #2f3138;
  --color-text: #f2f3f8;
  --color-muted: #afb3c5;
  --color-target: #2e3440;
  --color-self: #252832;
  --color-surface-alt: #2b2d36;
  --color-text-secondary: #c0c4d6;
  --color-link: #2e6dba;
  --color-status-warn: #2e363f;
  --color-status-ok: #6db49b;
  --color-status-off: #d07d7d;
  --color-status-error: #a76b6b;
  --color-status-error-rgb: 167, 107, 107;
  --color-text-tertiary: #9aa1b3;
  --color-button-text: #ffffff;
  --color-icon: #9aa1b3;

  /* コードブロック */
  --color-code-bg: #2d3748;
  --color-code-text: #e2e8f0;

  /* タスクステータスカラー */
  --color-task-open: #8a94a8;
  --color-task-active: #7b8db8;
  --color-task-done: #6d9b80;
  --color-task-due-overdue: #b86868;
  --color-task-due-soon: #5e9970;

  /* アクションカラー */
  --color-danger: #d07d7d;
  --color-danger-hover: #a76b6b;
  --color-warning: #ffc107;
  --color-warning-hover: #e0a800;
  /* B-致命-1 (2026-05-17): ダーク版機能色 (WCAG 4.5:1 以上を検算済、 設計書参照) */
  --color-success: #2ecc71;
  --color-success-hover: #27ae60;
  --color-error: #ff6b6b;
  --color-error-hover: #ee5a5a;
  --color-info: #5dade2;
  --color-info-hover: #3498db;
}