/* ==========================================================================
   設計トークン (spec §3.4 ダークモード / D フォント・配色設定化 / WCAG AA)
   - 配色・余白・フォント・最小タップ領域はすべてカスタムプロパティに一元化。
     個別要素への hex/font 直書きは禁止 (グローバル規約 §2 D)。
   - 配色は CSS `light-dark()` で **単一ソース化**: 各トークンを 1 回だけ
     `light-dark(ライト値, ダーク値)` で定義し、`color-scheme` で解決する。
     これによりダーク値の二重定義(従来の data-theme=dark と @media system の重複)を
     排し、トークン追加時の「ダーク同値漏れ」を構造的に防ぐ (UI商用化 §2-2)。
   - テーマ切替: :root[data-theme] が color-scheme を切替える。
       未指定/"light" = ライト固定 / "dark" = ダーク固定 / "system" = OS 追従。
     (theme.js が data-theme を循環。color-scheme は本CSSが従属設定する)
   - コントラスト: 本文・<rt>・補助ともに WCAG AA 以上を満たす値 (AC43)。
   ========================================================================== */

:root {
  /* テーマ解決の基準。light-dark() とネイティブUI(スクロールバー/フォーム)に効く。
     未指定 :root は従来挙動どおりライト既定。 */
  color-scheme: light;

  /* タイポグラフィ */
  --font-sans: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui,
    sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Menlo", monospace;
  --font-ruby: var(--font-sans);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-ruby: 0.62em; /* <rt> サイズ */

  /* 行間・字幅 (従来は直書き 1.6/1.7/700 等。トークン化) */
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.7;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 余白スケール */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-2: var(--radius-md); /* 後方互換エイリアス */
  --radius-pill: 999px;

  /* 最小タップ領域 (a11y / AC43)。body[data-min-target-px] が JS で上書き可 */
  --tap-min: 44px;

  /* レイアウト境界 (editor.layout.stack_breakpoint_px 768 と一致) */
  --bp-stack: 768px;
  /* ヘッダ実高 (sticky ツールバーの top 追従用。従来 56px 直書きを token 化) */
  --header-h: 56px;

  /* z-index */
  --z-header: 40;
  --z-popover: 50;
  --z-modal: 70;
  --z-toast: 80;

  /* ======================================================================
     配色 — light-dark(ライト, ダーク) で単一ソース化。色値は従来定義を厳密保持。
     ====================================================================== */
  --c-bg: light-dark(#f7f8fa, #0e1117);
  --c-surface: light-dark(#ffffff, #171b22);
  --c-surface-2: light-dark(#eef1f5, #1f242d);
  --c-surface-hover: light-dark(#e7ebf1, #232a34); /* 行/カードの hover 面 */
  --c-border: light-dark(#d3d9e0, #2c333d);
  --c-ink: light-dark(#14181f, #e8ecf1); /* 本文 (対 surface 15:1 / 13:1) */
  --c-ink-muted: light-dark(#515a66, #a3adba); /* 補助 (6.6:1 / 6.5:1) */
  --c-ink-rt: light-dark(#2b3340, #c9d3df); /* ruby <rt> (11:1 / 9.5:1) */
  /* エイリアス: app.css が広く参照 (未定義バグ修正)。var()→light-dark() のチェーン参照は
     一部ブラウザで無効化されるため、light-dark() を直接複製する (= --c-ink-muted / --c-ink)。 */
  --c-muted: light-dark(#515a66, #a3adba);
  --c-text: light-dark(#14181f, #e8ecf1);

  --c-accent: light-dark(#1b5fa8, #5aa0e6);
  --c-accent-ink: light-dark(#ffffff, #0e1117);
  --c-accent-soft: light-dark(#e3edf8, #1b2b3d);
  --c-accent-hover: light-dark(#17518f, #6fb0f0); /* ボタン hover */
  --c-accent-active: light-dark(#123f6f, #8cc1f4); /* ボタン active */

  /* 3色目 — ポッドキャスト多声(話者C)用。accent(青)/ok(緑)と十分に区別できる紫系。
     light-dark() のチェーン参照(var()経由)は一部ブラウザで空になる既知罠のため、
     ここで light-dark() を直接記述する (tokens.css の他トークンと同方針)。 */
  --c-accent2: light-dark(#7b3fb8, #b48ce6); /* 話者C の who バッジ背景 (対 white 5.0:1 / 対 #0e1117) */
  --c-accent2-ink: light-dark(#ffffff, #0e1117); /* 話者C バッジ前景 */
  --c-accent2-soft: light-dark(#efe6f8, #2b1b3d); /* 話者C の body 背景 (対 --c-ink AA) */

  --c-ok: light-dark(#1f7a4d, #56c98c);
  --c-ok-soft: light-dark(#e1f4ea, #15301f);
  --c-warn: light-dark(#8a5a00, #e6b84d); /* 黄系。テキスト用に暗めでコントラスト確保 */
  --c-warn-soft: light-dark(#fff3d6, #34290f);
  --c-warn-border: light-dark(#d9a300, #c79a2e);
  --c-danger: light-dark(#b3261e, #f0837c);
  --c-danger-soft: light-dark(#fbe4e2, #381b1a);
  --c-danger-surface: light-dark(rgba(179, 38, 30, 0.10), rgba(240, 131, 124, 0.14));
  --c-info: light-dark(#0f6b8a, #5cc1e0); /* 情報(accent と区別する teal-blue) */
  --c-info-soft: light-dark(#dff1f7, #0f2a33);

  --c-human: light-dark(#b3681e, #e0a45a); /* 人手編集ハイライト amber (AC: human=amber) */
  --c-human-soft: light-dark(#fcefdc, #352616);

  --c-focus: light-dark(#1b5fa8, #5aa0e6);
  --c-ring: light-dark(rgba(27, 95, 168, 0.45), rgba(90, 160, 230, 0.5)); /* focus ring */
  --c-overlay: light-dark(rgba(20, 24, 31, 0.45), rgba(0, 0, 0, 0.6)); /* modal backdrop */

  /* エレベーション (2→5段)。色部のみ light-dark()。card/popover は後方互換エイリアス。 */
  --shadow-xs: 0 1px 2px light-dark(rgba(20, 24, 31, 0.06), rgba(0, 0, 0, 0.30));
  --shadow-sm: 0 1px 3px light-dark(rgba(20, 24, 31, 0.10), rgba(0, 0, 0, 0.40));
  --shadow-md: 0 4px 12px light-dark(rgba(20, 24, 31, 0.12), rgba(0, 0, 0, 0.45));
  --shadow-lg: 0 6px 24px light-dark(rgba(20, 24, 31, 0.18), rgba(0, 0, 0, 0.50));
  --shadow-overlay: 0 12px 40px light-dark(rgba(20, 24, 31, 0.24), rgba(0, 0, 0, 0.60));
  /* 後方互換エイリアス。var()→light-dark() チェーンを避けるため直接複製 (= sm / lg)。 */
  --shadow-card: 0 1px 3px light-dark(rgba(20, 24, 31, 0.10), rgba(0, 0, 0, 0.40));
  --shadow-popover: 0 6px 24px light-dark(rgba(20, 24, 31, 0.18), rgba(0, 0, 0, 0.50));

  /* ======================================================================
     グラデーション / 装飾トークン (商用UIの華やかさ用)。
     var()→light-dark() チェーンは一部ブラウザで空になる既知罠のため、各stopに
     light-dark() を直接記述する (tokens.css の他トークンと同方針)。色は accent(青)〜
     accent2(紫)系で統一し、ダーク時も彩度を保つ。WCAG: 文字は白(--c-accent-ink)で AA。
     ====================================================================== */
  --grad-accent: linear-gradient(135deg,
    light-dark(#2f7ad1, #5aa0e6) 0%,
    light-dark(#6d4bd8, #9b7be6) 100%);
  --grad-accent-hover: linear-gradient(135deg,
    light-dark(#2a6fc0, #6fb0f0) 0%,
    light-dark(#6040c8, #ab8cf0) 100%);
  /* ヒーロー/重要カードの淡いティント背景 (surface に対し AA を保つ薄さ)。 */
  --grad-hero: linear-gradient(135deg,
    light-dark(#eef4fd, #161d2b) 0%,
    light-dark(#f4ecfc, #1c1730) 100%);
  /* ページ全体の極薄グラデ背景。地味さ解消だが本文可読性を損なわない。 */
  --grad-page: linear-gradient(180deg,
    light-dark(#f7f8fa, #0e1117) 0%,
    light-dark(#eef2f9, #0b0e14) 100%);
  /* アクセント帯(見出し下線・カード左ボーダー等)。 */
  --grad-bar: linear-gradient(90deg,
    light-dark(#2f7ad1, #5aa0e6) 0%,
    light-dark(#6d4bd8, #9b7be6) 100%);
}

/* color-scheme をテーマ選択に従属させる (値は :root で 1 回定義済み)。
   未指定 :root = light 既定 (従来挙動を保持)。 */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="system"] { color-scheme: light dark; }