/* WEE HOURS — components stylesheet. tokens.css（tokens.json から生成）の後に読み込む。
   tokens.json に入らない値（グラデーション・タイプの合成値・ウェイト／サイズ／行送り／字間・動き・役割別エイリアス）と base を置く。 */
/* 書体：本文は M PLUS 1。見出し・ナビは "Russo One", "M PLUS 1" の順で、英字・数字だけ Russo One（ロゴのワードマークの元書体）。
   Bungee は短い英字ラベルと時刻・番号専用。 */
:root{
/* 象徴的なグラデーション */
--gradient-dawn:linear-gradient(180deg,#1C2A55 0%,#1C2B57 25%,#1D315F 38%,#1E3A6C 48%,#20487F 57%,#225998 65%,#256EB6 72%,#2670B8 72%,#2B70B3 74%,#3A73A6 76%,#537891 78%,#767E73 81%,#A3874D 83%,#DA911F 86%,#E99413 86%,#E79813 89%,#E2A416 91%,#DBB81B 93%,#D0D422 95%,#D0D623 95%,#D0D623 100%); /* 名刺のグラデーションそのもの */
--gradient-dawn-x:linear-gradient(90deg,#1C2A55 0%,#1C2B57 25%,#1D315F 38%,#1E3A6C 48%,#20487F 57%,#225998 65%,#256EB6 72%,#2670B8 72%,#2B70B3 74%,#3A73A6 76%,#537891 78%,#767E73 81%,#A3874D 83%,#DA911F 86%,#E99413 86%,#E79813 89%,#E2A416 91%,#DBB81B 93%,#D0D422 95%,#D0D623 95%,#D0D623 100%);
--gradient-dawn-short:linear-gradient(90deg,#1C2A55 0%,#2670B8 45%,#E99413 78%,#D0D623 100%); /* derived、細い罫線用の短縮版 */
/* 夜から朝へ（トップページの演出） */
--gradient-night:linear-gradient(180deg,var(--wh-navy-900),var(--wh-navy-800) 55%,var(--wh-dusk)); /* 00:00〜03:00 の夜空 */
--gradient-sunrise:linear-gradient(180deg,#225998 0%,#2670B8 18%,#3A73A6 30%,#537891 40%,#767E73 50%,#A3874D 60%,#DA911F 70%,#E99413 76%,#E2A416 84%,#DBB81B 91%,#D0D623 100%); /* 夜明けの帯・夜明けの空 */
--gradient-morning:linear-gradient(180deg,var(--sky-morning-top) 0%,var(--sky-morning-mid) 55%,var(--sky-morning-bottom) 100%); /* 05:00以降の朝の空 */

--weight-regular:400;--weight-medium:500;--weight-bold:700;--weight-black:900;

--size-display:56px;--size-h1:40px;--size-h2:32px;--size-h3:24px;--size-h4:20px;
--size-body-lg:18px;--size-body:16px;--size-sm:14px;--size-xs:12px;--size-eyebrow:13px;

--leading-tight:1.25;--leading-snug:1.45;--leading-body:1.85;
--tracking-body:0.04em;--tracking-heading:0.06em;--tracking-eyebrow:0.16em;--tracking-name:0.5em;

/* semantic */
--type-display:var(--weight-black) var(--size-display)/var(--leading-tight) var(--font-sans);
--type-h1:var(--weight-bold) var(--size-h1)/var(--leading-tight) var(--font-sans);
--type-h2:var(--weight-bold) var(--size-h2)/var(--leading-snug) var(--font-sans);
--type-h3:var(--weight-bold) var(--size-h3)/var(--leading-snug) var(--font-sans);
--type-h4:var(--weight-medium) var(--size-h4)/var(--leading-snug) var(--font-sans);
--type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-sans);
--type-small:var(--weight-regular) var(--size-sm)/1.7 var(--font-sans);
--type-caption:var(--weight-regular) var(--size-xs)/1.6 var(--font-sans);
--type-eyebrow:400 var(--size-eyebrow)/1 var(--font-display);

--section-y:var(--space-9);

/* 角丸の役割：面は角丸10px（2026-10 に直角から変更）、小さな操作要素はピル型、入力欄は2px */
--radius-surface:var(--radius-md);
--radius-control:var(--radius-pill);
--radius-field:var(--radius-xs);

--ease-standard:cubic-bezier(.2,.7,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:120ms;
--dur-base:200ms;
--dur-slow:360ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body);letter-spacing:var(--tracking-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 0}
a{color:var(--text-link);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%;display:block}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--wh-navy-50);color:var(--wh-navy-700)}

/* Russo One は1ウェイトのみのため、全体で合成太字・斜体を切る（M PLUS 1 は実ウェイトがあるので影響なし） */
html,body,input,textarea,select,button{font-synthesis:none}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:var(--font-heading);font-synthesis:none}
/* すりガラス（Liquid Glass風）。夜のパートのカードや面に。Card は tone="glass" を使う */
.wh-glass{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);box-shadow:var(--glass-edge);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-radius:var(--radius-surface);overflow:hidden}
/* モバイル（600px以下）：時刻と見出しを縮める */
@media (max-width:600px){.wh-time{font-size:48px!important}.wh-h2{font-size:26px!important}}