/* ==========================================================
   未来亭WOWWOW ライトモード（白ベース＋ビビッドな赤）
   - modern-theme.css（ダーク）の後に読み込み、<html data-theme="light"> のときだけ色を上書きする
   - data-theme は header.php の先頭スクリプトが決める
     （メニューで手動選択 → 無ければOSの設定 → OSにカラーモード設定が無ければダーク）
   - data-theme="dark" のときは何も変わらない（今のダークのまま）
   - functions.php の WOWWOW_ENABLE_LIGHT_MODE を false にすると、このファイルは読み込まれず常にダークに戻る
   - :where() は詳細度を増やさないために使っている（ダーク側の規則との優先順位を変えないため）
   ========================================================== */

/* ---------- 色の基本（ダークと同じ変数名で、ライト用の値に置き換える） ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --accent: #e8123a;
    /* n50が一番明るく、n900が一番暗い（ライト用の階調） */
    --n50:  #fafafb;
    --n100: #f1f2f5;
    --n200: #e4e6eb;
    --n300: #cfd2da;
    --n400: #9aa1b0;
    --n500: #707889;
    --n600: #525a6b;
    --n700: #373e4d;
    --n800: #1f2430;
    --n900: #11141b;
    --on-accent: #fff;
    --deep: #fff;
    --bg-dark: #f3f4f7;   /* 交互の背景のうち、少しグレーな方 */
    --bg-light: #fff;     /* 交互の背景のうち、白い方 */
}

/* ---------- ヒーロー：写真の上なので、ライトでも暗いまま（文字は白） ---------- */
:where(html[data-theme="light"]) .hero { background: #0a0b0e; }

/* ---------- ヘッダー：白のすりガラス＋文字・家紋は暗い色 ---------- */
:where(html[data-theme="light"]) .site-header {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px -10px rgba(17, 20, 27, 0.2);
}
:where(html[data-theme="light"]) .site-header__logo { color: var(--n900); }
:where(html[data-theme="light"]) .site-header__emblem-icon { filter: brightness(0); }
:where(html[data-theme="light"]) .site-header__burger-line { background: var(--n900); }
/* トップのヒーロー上で透明なときだけ、これまで通り白い文字・白い家紋 */
:where(html[data-theme="light"]) body.has-hero:not(.wowwow-menu-open) .site-header:not(.is-scrolled) .site-header__logo { color: #fff; }
:where(html[data-theme="light"]) body.has-hero:not(.wowwow-menu-open) .site-header:not(.is-scrolled) .site-header__emblem-icon { filter: none; }
:where(html[data-theme="light"]) body.has-hero:not(.wowwow-menu-open) .site-header:not(.is-scrolled) .site-header__burger-line { background: #fff; }

/* ---------- ローディング画面：白地に、薄いグレー文字を赤が埋めていく ---------- */
:where(html[data-theme="light"]) .ld__layer--base { color: var(--n300); }

/* ---------- フッター ---------- */
:where(html[data-theme="light"]) .site-footer__wordmark { color: var(--n900); }
@media (hover: hover) and (pointer: fine) {
    :where(html[data-theme="light"]) .site-footer__social a:hover { color: var(--n900); }
}

/* ---------- 県名ラベル：白地でも読めるよう文字色を暗くする ---------- */
:where(html[data-theme="light"]) #live .live-list__area {
    background: rgba(232, 18, 58, 0.1);
    border-color: rgba(232, 18, 58, 0.5);
}
:where(html[data-theme="light"]) #live .live-list__area[style*="--area-hue"] {
    color: hsl(var(--area-hue) var(--area-s) calc(var(--area-l) * 0.52));
    background: hsl(var(--area-hue) var(--area-s) calc(var(--area-l) * 0.6) / 0.1);
    border-color: hsl(var(--area-hue) var(--area-s) calc(var(--area-l) * 0.52) / 0.5);
}

/* ---------- 実績欄のカテゴリーラベル：白地で読める濃い色 ---------- */
:where(html[data-theme="light"]) #history .live-list__area--radio   { color: #b8620f; }
:where(html[data-theme="light"]) #history .live-list__area--tv      { color: #7c3fd0; }
:where(html[data-theme="light"]) #history .live-list__area--mc      { color: #138a52; }
:where(html[data-theme="light"]) #history .live-list__area--lecture { color: #d0287a; }

/* ---------- ヒーロー内のアクセント：暗い写真の上で読めるよう、少し明るい赤にする ---------- */
:where(html[data-theme="light"]) .hero { --accent: #ff3b5c; }