@charset "UTF-8";
/* =====================================================================
   nzw.jp トップページ — テーマの変数層
   ---------------------------------------------------------------------
   時間帯テーマ（朝 / 昼 / 夕 / 夜）で色が変わるものを、この 1 枚に集める。
   新しく書く幕は必ずここの --home-* を使うこと。**!important は書かない。**

   なぜ要るか:
     既存のカードは「ライトの値を焼き込んだ Tailwind のユーティリティ」で
     塗られていて、夜にするには .text-slate-800 のようなユーティリティを
     名指しで潰すしかない状態になっている（home.css に約 40 セレクタ、
     ほぼ全部 !important）。同じ轍を踏まないための層。

   これは新発明ではなく、このコードベースが既に採っているやり方の完成:
     - design-system.css の .nzw-weather-* が虹ラインで同じことをしている
     - site-nav.css が --sh-ink / --sh-accent でヘッダーのスキンを切り替えている
     - ヒーローの書籍パネルが --bk-title / --bk-body を持ち、コメントに
       「夜で差し替えられるように」と書いてある

   朝 / 夕 は下地が明るいので、既定（ライト）の値で足りる。上書きするのは夜だけ。
   ===================================================================== */

body {
    --home-ink:          var(--nzw-text);          /* 本文 */
    --home-ink-strong:   var(--nzw-text-strong);   /* 見出し */
    --home-ink-sub:      var(--nzw-sub);           /* 補助 */
    --home-ink-muted:    var(--nzw-muted);         /* キャプション */
    --home-accent:       var(--nzw-accent-deep);   /* 文字に載せるアクセント */
    --home-surface:      var(--nzw-card);
    --home-surface-glass: rgba(255, 255, 255, 0.8);
    --home-border:       var(--nzw-border);
}

body.theme-night {
    --home-ink:          #e2e8f0;
    --home-ink-strong:   #f8fafc;
    --home-ink-sub:      #94a3b8;
    --home-ink-muted:    #64748b;
    /* 夜の下地（#0f172a）に対して accent-deep(#0369a1) は 2.4:1 しか出ない。
       見出しに使うので accent-light まで上げる（#38bdf8 で 7.6:1）。 */
    --home-accent:       #38bdf8;
    --home-surface:      rgba(30, 41, 59, 0.7);
    --home-surface-glass: rgba(30, 41, 59, 0.8);
    --home-border:       rgba(255, 255, 255, 0.1);
}

/* 夕はオレンジの下地。文字は既定より少し濃くしたほうが締まる */
body.theme-sunset {
    --home-ink-strong:   #3b2416;
    --home-ink:          #4e342e;
    --home-ink-sub:      #7a5c4e;
    --home-ink-muted:    #9b7d6e;
}

/* 朝は水色の下地。ライトの値で足りるが、補助文字だけ青側に寄せる */
body.theme-morning {
    --home-ink-sub:      #55707a;
    --home-ink-muted:    #7d949c;
}


/* 動きを減らす OS 設定のときは、背景の段階を選ばせない。
   off は「上書きできるユーザーの選好」、reduced-motion は「上書きされてはならない
   OS の設定」。押せないボタンを見せない（印は bg-manager.js が付ける）。
   ★ 幕の振り付け（home-stage.css）ではなくここに置くのは、classic.html が
     home-stage.css を読まないから。設定は新旧どちらでも同じに振る舞わせる。 */
body.bg-tier-locked #bg-setting-block,
body.bg-tier-locked .setting-opt[data-setting="bg"],
body.bg-tier-locked .meta-row:has(.setting-opt[data-setting="bg"]) {
    display: none;
}


/* ---------------------------------------------------------------------
   新旧の切り替えボタン — 最初の 5 秒だけの合図
   ---------------------------------------------------------------------
   既定が従来のデザインになったので、もう一方があること自体に気づかれない。
   36px のアイコン 1 つでは弱いが、常時光らせると急かしているように見える。
   4 周 × 1.25 秒 = 5 秒で自分から止まる（クラスは JS が 5 秒後に外す）。

   ★ 幕の振り付け（home-stage.css）ではなくここに置くのは、classic.html が
     home-stage.css を読まないから。ボタンは新旧どちらにもある。
   ★ 動きを減らす設定のときは JS 側がクラスを付けない。
     加えて design-system.css の全称セレクタがアニメを潰すので二重に止まる。
   --------------------------------------------------------------------- */

@keyframes nzw-variant-hint {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0), var(--nzw-shadow-sm);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.16),
                    0 0 14px 2px rgba(14, 165, 233, 0.30);
    }
}

#home-variant-btn.is-hinting {
    animation: nzw-variant-hint 1.25s ease-in-out 4;
    border-color: var(--nzw-accent-light);
    color: var(--nzw-accent-strong);
}

body.theme-night #home-variant-btn.is-hinting {
    border-color: rgba(56, 189, 248, 0.55);
    color: #7dd3fc;
}