/* =========================================================
   デザイントークン
   ライト / ダークの両対応（NFR-U-02）。
   OS 設定に追従しつつ、data-theme 属性で手動上書きできる。
   ========================================================= */

:root {
  /* 面 */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e8ebf0;
  --border: #dfe3e8;
  --border-strong: #c7cdd6;

  /* 文字 */
  --text: #1b1f24;
  --text-muted: #5b6470;
  --text-faint: #8a929d;

  /* アクセント（コントラスト比 4.5:1 以上を満たす値を選ぶ） */
  --accent: #2f6bd8;
  --accent-hover: #2559b8;
  --accent-text: #ffffff;
  --accent-soft: #e8effc;

  /* 状態 */
  --ok: #1a7f45;
  --ok-bg: #e6f4ec;
  --warn: #8a6100;
  --warn-bg: #fdf3dd;
  --error: #b3261e;
  --error-bg: #fdecea;

  /* 余白・角丸 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* タイポ */
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
          "Noto Sans JP", "Yu Gothic UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* 影（浮きすぎないよう控えめに） */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-2: 0 4px 16px rgb(0 0 0 / 10%);

  /* レイアウト */
  --header-h: 56px;
  --sidebar-w: 260px;
  --content-max: 820px;
  --composer-h: 0px; /* スレッド画面で JS が実測値を入れる */

  /* iPhone のホームバーなど、画面下端の安全領域 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --surface: #1c2028;
    --surface-2: #232833;
    --surface-3: #2c323e;
    --border: #333a46;
    --border-strong: #454e5d;

    --text: #e6e9ee;
    --text-muted: #9aa4b2;
    --text-faint: #6f7885;

    --accent: #6f9dfa;
    --accent-hover: #86adfb;
    --accent-text: #0d1117;
    --accent-soft: #1e2a40;

    --ok: #62d69a;
    --ok-bg: #16301f;
    --warn: #e5c07b;
    --warn-bg: #332a14;
    --error: #f28b82;
    --error-bg: #3a1d1a;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-2: 0 4px 16px rgb(0 0 0 / 45%);
  }
}

/* 手動切替は OS 設定より優先する */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e8ebf0;
  --border: #dfe3e8;
  --border-strong: #c7cdd6;
  --text: #1b1f24;
  --text-muted: #5b6470;
  --text-faint: #8a929d;
  --accent: #2f6bd8;
  --accent-hover: #2559b8;
  --accent-text: #ffffff;
  --accent-soft: #e8effc;
  --ok: #1a7f45; --ok-bg: #e6f4ec;
  --warn: #8a6100; --warn-bg: #fdf3dd;
  --error: #b3261e; --error-bg: #fdecea;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14171c;
  --surface: #1c2028;
  --surface-2: #232833;
  --surface-3: #2c323e;
  --border: #333a46;
  --border-strong: #454e5d;
  --text: #e6e9ee;
  --text-muted: #9aa4b2;
  --text-faint: #6f7885;
  --accent: #6f9dfa;
  --accent-hover: #86adfb;
  --accent-text: #0d1117;
  --accent-soft: #1e2a40;
  --ok: #62d69a; --ok-bg: #16301f;
  --warn: #e5c07b; --warn-bg: #332a14;
  --error: #f28b82; --error-bg: #3a1d1a;
}

/* 動きを減らす設定を尊重する（NFR-U-04） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}