/* moat-sensei 共通ブランドトークン v2
   配色：白背景 ＋ 紺色基調 ＋ 控えめなゴールド
   prefers-color-scheme（OS設定）で自動切替＋ data-theme="light|dark" で手動上書き可能。 */

:root {
  /* === Light mode（白＋紺）=== */
  --bg:           #FFFFFF;       /* 純白 */
  --bg-surface:   #FFFFFF;       /* カード */
  --bg-elev:      #F7F9FC;       /* やや浮く要素 */
  --bg-subtle:    #EFF2F7;       /* 区切り背景 */

  --text:         #0F2A5C;       /* 深紺・主要テキスト */
  --text-muted:   #4B5876;       /* 補助テキスト */
  --text-subtle:  #8A92A5;       /* 説明・キャプション */
  --text-on-primary: #FFFFFF;    /* primary 上の文字 */

  --primary:        #0F2A5C;     /* メイン色：深紺（ボタン・リンク・見出し） */
  --primary-hover:  #1A3A6E;
  --primary-bg:     rgba(15, 42, 92, .06);   /* primary 薄塗り */

  --accent:         #0F2A5C;     /* アクセントも基本ネイビー（CTA等） */
  --accent-hover:   #1A3A6E;
  --accent-bg:      rgba(15, 42, 92, .08);

  --gold:           #C9A961;     /* 金 — バッジ・ハイライト・★・featured 用「時々」 */
  --gold-hover:     #B89651;
  --gold-bg:        rgba(201, 169, 97, .12);

  --good:           #2D8659;     /* 上昇・成功 */
  --bad:            #B83A3A;     /* 下落・エラー（控えめ赤） */
  --warn:           #B97D2A;

  --border:         rgba(15, 42, 92, .12);
  --border-strong:  rgba(15, 42, 92, .25);

  --shadow-sm:  0 1px 3px rgba(15, 42, 92, .06);
  --shadow-md:  0 4px 14px rgba(15, 42, 92, .08);
  --shadow-lg:  0 14px 40px rgba(15, 42, 92, .12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "游明朝", serif;
  --sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  /* === 後方互換エイリアス（旧コードからの参照を救済） === */
  --bg-deep: var(--bg);
  --bg-mid: var(--bg-elev);
  --bg-card: var(--bg-surface);
  --gold-bright: var(--gold);
  --cream: var(--bg);
  --text-on-dark: var(--text);
}

/* === Dark mode（紺背景・夜）=== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0A1530;       /* ほぼ黒紺 */
    --bg-surface:   #0F1F3D;       /* カード */
    --bg-elev:      #142B52;
    --bg-subtle:    #1A335E;

    --text:         #F0F4F9;
    --text-muted:   #B0BBD0;
    --text-subtle:  #6B7794;
    --text-on-primary: #0A1530;

    --primary:        #F0F4F9;     /* 反転：foreground が白に */
    --primary-hover:  #FFFFFF;
    --primary-bg:     rgba(240, 244, 249, .08);

    --accent:         #F0F4F9;
    --accent-hover:   #FFFFFF;
    --accent-bg:      rgba(240, 244, 249, .1);

    --gold:           #D4B97A;     /* 暗背景でも見やすい少し明るめ金 */
    --gold-hover:     #E2C988;
    --gold-bg:        rgba(212, 185, 122, .14);

    --good:           #5DD66E;
    --bad:            #FF8888;
    --warn:           #FFC857;

    --border:         rgba(240, 244, 249, .15);
    --border-strong:  rgba(240, 244, 249, .3);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, .4);
    --shadow-lg:  0 14px 40px rgba(0, 0, 0, .55);
  }
}

/* === Manual override（テーマトグルボタン用）=== */
:root[data-theme="dark"] {
  --bg:           #0A1530;
  --bg-surface:   #0F1F3D;
  --bg-elev:      #142B52;
  --bg-subtle:    #1A335E;
  --text:         #F0F4F9;
  --text-muted:   #B0BBD0;
  --text-subtle:  #6B7794;
  --text-on-primary: #0A1530;
  --primary:        #F0F4F9;
  --primary-hover:  #FFFFFF;
  --primary-bg:     rgba(240, 244, 249, .08);
  --accent:         #F0F4F9;
  --accent-hover:   #FFFFFF;
  --accent-bg:      rgba(240, 244, 249, .1);
  --gold:           #D4B97A;
  --gold-hover:     #E2C988;
  --gold-bg:        rgba(212, 185, 122, .14);
  --good:           #5DD66E;
  --bad:            #FF8888;
  --warn:           #FFC857;
  --border:         rgba(240, 244, 249, .15);
  --border-strong:  rgba(240, 244, 249, .3);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, .4);
  --shadow-lg:  0 14px 40px rgba(0, 0, 0, .55);
}

/* テーマトグルボタン（auth-gate.js が注入）
   ヘッダー／モバイルドロワーは常に紺#0F2A5Cのため、変数依存をやめて白系で固定 */
.__theme-toggle__ {
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid rgba(255,255,255,.3);
  color:rgba(255,255,255,.88);cursor:pointer;
  transition:all .18s ease;font-size:14px;
}
.__theme-toggle__:hover{ color:#C9A961;border-color:#C9A961;background:rgba(201,169,97,.12); }
/* モバイルドロワー内では大きめに（タップしやすく） */
@media (max-width: 1024px){
  .__theme-toggle__{ width:40px;height:40px;font-size:16px; }
}

html, body { background: var(--bg); color: var(--text); transition: background-color .25s ease, color .25s ease; }