/* 銀次ラジオスタジオの「デザインの値」の正本。色・ガラス・影・光の帯・角丸・文字・余白・動き。 画面の CSS はここの変数だけを使う（色や秒数を直に書かない）。世界観は「深夜のスタジオ、オンエアの灯り」。 ※ファイル名に token を含めると機密保護の設定で読み書きできないため、theme.css としている。 */ :root { color-scheme: dark; /* ───── 下地：番組カバーの紺（#0e162a）を中心に、墨へ沈む ───── */ --ink-0: #03060d; --ink-1: #060a16; --ink-2: #0a1120; --ink-3: #0e162a; --ink-4: #141e37; --ink-5: #1b2745; --ink-6: #243256; --bg: var(--ink-1); --bg-elev: var(--ink-2); --surface: var(--ink-3); --surface-2: var(--ink-4); --surface-3: var(--ink-5); --surface-4: var(--ink-6); /* ───── ガラス（半透明＋背景ぼかし＋上辺1pxの光） ───── */ --glass: rgba(16, 25, 46, 0.62); --glass-strong: rgba(14, 22, 42, 0.88); --glass-soft: rgba(22, 33, 59, 0.42); --glass-blur: blur(22px) saturate(1.35); --glass-edge: inset 0 1px 0 rgba(255, 244, 214, 0.08); --glass-sheen: linear-gradient(180deg, rgba(255, 244, 214, 0.055), rgba(255, 244, 214, 0) 42%); /* ───── 線（金にわずかに寄せた温かい白） ───── */ --line: rgba(230, 214, 170, 0.08); --line-2: rgba(230, 214, 170, 0.14); --line-3: rgba(230, 214, 170, 0.24); --line-gold: rgba(216, 180, 92, 0.5); /* ───── 文字（紺の面に対して 7:1 以上） ───── */ --text: #f6f1e6; --text-2: #d2ccbd; --text-3: #b4ae9f; --text-ink: #171106; /* ───── 金（カバーの「AIラジオ」#d8b45c）・銀（「銀次の」#c5c1b7）・ブロンズ ───── */ --gold: #d8b45c; --gold-2: #e7c877; --gold-3: #f3dfa6; --gold-deep: #a8843a; --amber: #d98f2e; --champagne: #fbf1d6; --silver: #c9c4b8; --bronze: #7a6a4c; --patina: #5f7a6c; --gold-soft: rgba(216, 180, 92, 0.13); --gold-softer: rgba(216, 180, 92, 0.07); /* ───── 光の帯（艶消しの金。番組カバーの #d8b45c に合わせ、橙と白い筋を抑える）。 主ボタン・ロゴ・選択中の縁・成功の演出・録音開始の瞬間だけ。白い筋はホバーと時々流れる光沢でだけ見せる ───── */ --band: linear-gradient(100deg, #c39c4b 0%, #d2b062 28%, #dfc27b 52%, #e5ca86 64%, #d6b460 84%, #c39c4b 100%); --band-text: linear-gradient(100deg, #d8b45c 0%, #ecd395 45%, #f6e7bd 55%, #d8b45c 100%); --band-soft: linear-gradient(100deg, rgba(216, 180, 92, 0.12), rgba(236, 208, 138, 0.06) 55%, rgba(248, 236, 200, 0)); --band-hairline: linear-gradient(120deg, rgba(216, 180, 92, 0.18), rgba(243, 223, 166, 0.9) 42%, rgba(216, 180, 92, 0.28) 72%, rgba(231, 200, 119, 0.7)); /* 主役の面（1画面に1つ）：縁の太さ・上辺の光・奥に溜まる光 */ --hero-edge: 1.5px; --hero-top: radial-gradient(70% 100% at 50% 0%, rgba(243, 223, 166, 0.13), rgba(243, 223, 166, 0) 70%); --hero-glow: 0 50px 120px -50px rgba(216, 170, 80, 0.42), 0 0 0 1px rgba(0, 0, 0, 0.35); /* ───── 状態の色（緑・黄・赤・青）。文字の濃さ／強い色／薄い地／縁 ───── */ --ok: #93deb2; --ok-strong: #4fbf85; --ok-soft: rgba(79, 191, 133, 0.13); --ok-line: rgba(147, 222, 178, 0.38); --warn: #ffd36e; --warn-strong: #f0b43c; --warn-soft: rgba(240, 180, 60, 0.13); --warn-line: rgba(255, 211, 110, 0.4); --danger: #ff9393; --danger-strong: #ec5a5a; --danger-soft: rgba(236, 90, 90, 0.14); --danger-line: rgba(255, 147, 147, 0.42); --info: #96c6ff; --info-strong: #5b9cf0; --info-soft: rgba(91, 156, 240, 0.13); --info-line: rgba(150, 198, 255, 0.38); --idle: #b4ae9f; --idle-soft: rgba(180, 174, 159, 0.1); --idle-line: rgba(180, 174, 159, 0.28); /* 経過時間の橙（16分を過ぎた時。仕様 2-2） */ --orange: #ffb27a; /* ON AIR の赤（ランプと録音ボタンの芯。文字の赤は --danger） */ --rec: #ff4b4b; --rec-hot: #ff7a6a; --rec-deep: #a3161f; --rec-soft: rgba(255, 75, 75, 0.16); --rec-off: #3b1a22; /* 音量計の段（緑→黄→赤） */ --vu-low: #6fd59b; --vu-mid: #e8cf62; --vu-high: #ff6a55; --vu-off: rgba(230, 214, 170, 0.08); /* ───── 影と光 ───── */ --shadow-1: inset 0 1px 0 rgba(255, 244, 214, 0.05), 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-2: inset 0 1px 0 rgba(255, 244, 214, 0.07), 0 18px 40px -18px rgba(0, 0, 0, 0.75); --shadow-3: inset 0 1px 0 rgba(255, 244, 214, 0.08), 0 40px 100px -30px rgba(0, 0, 0, 0.9); --glow-gold: 0 0 0 1px rgba(236, 208, 138, 0.55), 0 14px 38px -12px rgba(216, 160, 70, 0.7); --glow-gold-soft: 0 0 0 1px rgba(216, 180, 92, 0.35), 0 10px 30px -14px rgba(216, 180, 92, 0.45); --glow-rec: 0 0 0 1px rgba(255, 122, 106, 0.55), 0 0 28px rgba(255, 75, 75, 0.55), 0 0 70px rgba(255, 75, 75, 0.28); --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px rgba(243, 223, 166, 0.9); /* ───── 角丸 ───── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ───── 文字 ───── */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --fw-body: 500; --fw-label: 600; --fw-head: 700; --fw-display: 800; --fs-xs: 13px; /* 飾りの英字・目盛りだけ。読ませる文には使わない */ --fs-sm: 17px; /* 補足・注記の最小 */ --fs-body: 20px; /* 本文（仕様 2-0：最小20px） */ --fs-lead: 22px; --fs-h3: 22px; --fs-h2: 28px; --fs-h1: 38px; --fs-display: 56px; --fs-timer: 72px; --lh-body: 1.7; --lh-tight: 1.35; --tracking-eyebrow: 0.16em; /* カンペの文字（録音前にスライダーで変える。録音画面が上書きする） */ --kanpe-current: 44px; --kanpe-other: 28px; /* ───── 余白 ───── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --page-max: 1360px; --page-pad: clamp(20px, 3vw, 44px); --topbar-h: 72px; /* ───── 動き（時間とカーブ）。動かすのは transform と opacity だけ ───── */ --d1: 140ms; --d2: 240ms; --d3: 420ms; --d4: 720ms; --d5: 1100ms; --d-sheen: 900ms; --d-pulse: 2800ms; --d-ambient: 30s; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --stagger: 50ms; /* ───── 重なりの順 ───── */ --z-ambient: 0; --z-page: 1; --z-topbar: 40; --z-bands: 45; --z-tip: 60; --z-toast: 80; --z-dialog: 90; /* ───── 背景の粒（SVGのノイズ。data: なので外部読み込みなし） ───── */ --grain: url("data:image/svg+xml;utf8,"); }