/* WEE HOURS Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --wh-navy-50: #e9eaf0; /* derived（元データにない補間値）。淡い面：surface-tint・border-subtle・選択範囲の地。 */
  --wh-navy-100: #d3d6e0; /* derived。ネイビーの淡いトーン。 */
  --wh-navy-300: #8f95b0; /* derived。ネイビーの中間トーン。 */
  --wh-navy-500: #4b5584; /* derived。主ボタンのホバー（action-primary-hover）。 */
  --wh-navy-700: #1f2c5c; /* ロゴのネイビー — ブランドの基本色。ロゴ・見出し・主ボタン・濃色の面。白地で13.4:1。 */
  --wh-navy-800: #1c2a55; /* 名刺裏面の地色。濃色セクション（surface-inverse）。白文字13.9:1。 */
  --wh-navy-900: #161f45; /* derived。主ボタンの押下時（action-primary-press）。 */
  --wh-dusk: #1d315f; /* 夜明けグラデーション（名刺「名称未設定グラデーション 5」）の分岐点。 */
  --wh-blue: #2670b8; /* 夜明けの青。リンクのホバー・フォーカス枠。白地で5.1:1。 */
  --wh-blue-700: #225998; /* 夜明けグラデーションの分岐点（深い青）。 */
  --wh-haze: #767e73; /* 夜明けグラデーションの分岐点（青から橙へ移る霞）。 */
  --wh-orange: #e99413; /* 日の出のオレンジ — 時計の「現在」の目盛り。1画面1箇所まで（主要CTA・現在地・必須表示）。上の文字はネイビー（5.5:1）。白地の文字には使わない（2.4:1）。 */
  --wh-amber: #e2a416; /* 夜明けグラデーションの分岐点。accentボタンのホバー。 */
  --wh-lime: #d0d623; /* 曙光。グラデーションの終端。上に文字を置かない。 */
  --wh-white: #ffffff; /* 白。ページ・カードの地、濃色面の上の文字。 */
  --wh-gray-50: #f5f5f5; /* derived。淡いセクションの地（surface-subtle）。 */
  --wh-gray-300: #c9caca; /* アイコンのリング。入力欄などの標準の線（border-default）。 */
  --wh-gray-500: #9fa0a0; /* アイコンの目盛り。装飾用 — 白地で2.6:1のため本文の文字色には使わない。 */
  --wh-gray-700: #595757; /* 補助文字（text-secondary）。白地で7.2:1。 */
  --wh-gray-900: #231815; /* 名刺の文字色（K100）。本文（text-primary）。白地で17.3:1。 */
  --wh-success: #2e8b57; /* derived、Webサイト用の成功色（Toastなど）。白地の文字では4.3:1でAAに届かない — 文字はアイコンや語と併用。 */
  --wh-danger: #c8372d; /* derived、Webサイト用のエラー色。白地で5.2:1。 */
  --text-primary: var(--wh-gray-900); /* 本文の文字色。surface-page・surface-subtle の上。 */
  --text-secondary: var(--wh-gray-700); /* 補助文字。surface-page・surface-subtle の上。 */
  --text-tertiary: var(--wh-gray-500); /* 注記・ラベルの淡い文字。白地で2.6:1 — 元データどおりの値。本文には使わない。 */
  --text-heading: var(--wh-navy-700); /* 見出しの文字色（太字・字間0.06em）。 */
  --text-inverse: var(--wh-white); /* ネイビー面とグラデーションのネイビー部分の上の文字。暖色帯の上には置かない。 */
  --text-link: var(--wh-navy-700); /* リンクの文字色。 */
  --text-link-hover: var(--wh-blue); /* リンクのホバー。ネイビーから夜明けの青へ。 */
  --text-accent: var(--wh-orange); /* アクセントの文字・目盛り。1画面1箇所まで。 */
  --text-danger: var(--wh-danger); /* エラーメッセージ。 */
  --surface-page: var(--wh-white); /* ページの地。 */
  --surface-subtle: var(--wh-gray-50); /* 淡いセクションの地。 */
  --surface-tint: var(--wh-navy-50); /* ネイビー系の淡い面。画像の仮置き。 */
  --surface-inverse: var(--wh-navy-800); /* 濃色セクション・inverseカード。 */
  --surface-card: var(--wh-white); /* カードの地。 */
  --border-subtle: var(--wh-navy-50); /* カードと区切りの1px線。 */
  --border-default: var(--wh-gray-300); /* 入力欄の線。 */
  --border-strong: var(--wh-navy-700); /* 2pxの強い線（表・一覧の区切り）、カードのホバー線。 */
  --border-focus: var(--wh-blue); /* フォーカス時の枠線。 */
  --action-primary: var(--wh-navy-700); /* 主ボタンの地。 */
  --action-primary-hover: var(--wh-navy-500); /* 主ボタンのホバー（明るくなる）。 */
  --action-primary-press: var(--wh-navy-900); /* 主ボタンの押下（暗くなり scale(.98)）。 */
  --action-accent: var(--wh-orange); /* accentボタンの地（ネイビー文字）。1画面1つまで。 */
  --action-accent-hover: var(--wh-amber); /* accentボタンのホバー。 */
  --sky-morning-top: #f6f9fd; /* 朝の空のグラデーション（上）。05:00以降の朝のパートの背景。 */
  --sky-morning-mid: #eaf1f9; /* 朝の空のグラデーション（中）。 */
  --sky-morning-bottom: #d9e5f3; /* 朝の空のグラデーション（下）。うすい青空。 */
  --skyline-morning: #c3d2e6; /* 朝の街のシルエットの色（淡い青グレー）。文字の背景にしても読める明るさ。 */
  --shadow-none: none; /* 既定。カードは影なし。 */
  --shadow-sm: 0 1px 2px rgba(31,44,92,.08); /* ネイビー系の弱い影。 */
  --shadow-md: 0 6px 20px rgba(31,44,92,.12); /* メニュー。 */
  --shadow-lg: 0 16px 48px rgba(31,44,92,.18); /* ダイアログ。 */
  --focus-ring: 0 0 0 3px rgba(38,112,184,.35); /* :focus-visible のリング（夜明けの青）。 */
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 40px rgba(8,14,40,.35); /* すりガラス（Liquid Glass風）の縁のハイライトと沈み。夜のパートのカード（Card tone="glass"）。 */
}
:root {
  --space-0: 0; /* 余白なし。 */
  --space-1: 4px; /* 4px基準の最小単位。 */
  --space-2: 8px; /* アイコンとラベルの間など。 */
  --space-3: 12px; /* 小さな要素間。 */
  --space-4: 16px; /* 要素間の標準。 */
  --space-5: 24px; /* カードの内側余白。 */
  --space-6: 32px; /* ブロック間。 */
  --space-7: 48px; /* 大きなブロック間。 */
  --space-8: 64px; /* セクション内の大きな区切り。 */
  --space-9: 96px; /* セクションの上下余白（--section-y）。 */
  --space-10: 128px; /* 最大の余白。 */
  --container-max: 1120px; /* コンテナ幅。 */
  --container-narrow: 760px; /* 狭いコンテナ（フォーム・本文）。 */
  --gutter: 24px; /* コンテナの左右余白。 */
  --header-h: 88px; /* ヘッダーの高さ（PC）。ロゴ高さ52px＋上下余白。1200px以下は畳んだ版。 */
  --dawn-strip: 8px; /* 縦のグラデーション帯の幅（名刺表面より）。 */
  --radius-none: 0; /* 直角。ロゴの角版と名刺。現在は面には使わない（--radius-surface は radius-md）。 */
  --radius-xs: 2px; /* 入力欄（--radius-field）。 */
  --radius-sm: 4px; /* 小さな角丸。 */
  --radius-md: 10px; /* 面・カード・ダイアログ・ジャケット画像（--radius-surface）。2026-10 に直角から変更。 */
  --radius-pill: 999px; /* ボタン・バッジ・タブ・目盛り（--radius-control）。時計の目盛りの丸い端。 */
  --border-width: 1px; /* 標準の線。 */
  --border-width-strong: 2px; /* 強い線（表・一覧の区切り）。 */
  --watermark-opacity: 0.1; /* 名刺：時計アイコンを10%の透かしにして角からはみ出させる。下層ページのヒーロー。 */
  --font-sans: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display: "Bungee", "M PLUS 1", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-heading: "Russo One", "M PLUS 1", "Hiragino Sans", sans-serif;
  --text-display: 900 56px/1.25 var(--font-sans); /* ヒーローの大見出し（--type-display）。 */
  --text-h1: 700 40px/1.25 var(--font-heading); /* ページ見出し。text-heading。 */
  --text-h2: 700 32px/1.45 var(--font-heading); /* セクション見出し。英字ラベル（eyebrow）の下に置く。 */
  --text-h3: 700 24px/1.45 var(--font-heading); /* カード・小見出し。 */
  --text-h4: 500 20px/1.45 var(--font-heading); /* 小見出し。 */
  --text-body: 400 16px/1.85 var(--font-sans); /* 本文。text-primary。 */
  --text-small: 400 14px/1.7 var(--font-sans); /* 補足・注記。 */
  --text-caption: 400 12px/1.6 var(--font-sans); /* キャプション・著作権表示。 */
  --text-time: 400 64px/1 var(--font-display); /* 時刻見出し（TimeHeading）の時刻。「:00」は0.4emに落とす。モバイル（600px以下）は48px。 */
  --text-eyebrow: 400 13px/1 var(--font-display); /* Bungee。短い英字の大文字ラベルと時刻・番号（「01」「03:00」）専用。 */
}
.display {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.time {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.16em;
}