/* ===================================================================== rheo — デザイントークン --------------------------------------------------------------------- 全画面が最初に読み込む。ここには :root の変数定義以外を置かないこと （scripts/verify_frontend_assets.py が他のセレクタの混入を検出する）。 値は移行前の各 HTML の :root と 1 文字も変えていない。見た目を変える 改修（TIERO デザインシステムの適用）は分離完了後の別 PR で行う。 対応表: docs/guides/フロントエンド資産構成とデプロイ手順書.md §6 ===================================================================== */ :root { /* ── サーフェス ── */ --bg: #181a1f; --bg-light: #242730; --bg-deep: #111318; /* ── テキスト ── */ --text: #dde1ea; --text-muted: #8a90a0; --text-dim: #5a6070; /* ── アクセント ── */ --accent: #5e81ac; --accent-2: #7c5cbf; --accent-glow: rgba(94, 129, 172, 0.55); /* ── パネル ── */ --panel-bg: rgba(30, 33, 42, 0.45); --panel-bg-solid: rgba(30, 33, 42, 0.92); --panel-border: rgba(255, 255, 255, 0.055); --panel-border-light: rgba(255, 255, 255, 0.10); /* ── ステータス ── */ --ok: #81c784; --warn: #ffcc80; --err: #f28b82; /* ── コードブロック（移行前は index.html のみが定義していた。 未参照の画面では単に使われないだけで影響しない） ── */ --code-bg: #0e1015; --code-text: #cdd6f4; /* ── ニューモーフィズムの影 ── --nm-flat は移行前 dashboard.html にだけ無かったが、dashboard は var(--nm-flat) を一度も参照していないため定義を足しても表示は変わらない。 */ --nm-flat: 6px 6px 14px rgba(0,0,0,0.55), -4px -4px 10px rgba(255,255,255,0.07); --nm-inset: inset 4px 4px 10px rgba(0,0,0,0.55), inset -3px -3px 8px rgba(255,255,255,0.06); /* ── タイポグラフィ ── */ --font-sans: "Montserrat", "Noto Sans JP", "Helvetica Neue", sans-serif; /* 管理系 3 画面（admin / dashboard / settings）の本文サイズ。 index.html は移行前から無指定（＝ 16px）なので app-base.css でのみ使う。 */ --fs-body: 14px; /* ── 角丸 ── */ /* ピル型（ボタン / タブ / バッジ / トースト）。20 箇所で使う唯一の 意味の定まった角丸なのでトークン化する。 */ --r-pill: 999px; /* ── 背景 ── */ --app-bg: radial-gradient(ellipse 75% 65% at 50% 46%, #2d2d2d 0%, #1a1a1a 38%, #0c0c0c 100%); --login-bg: radial-gradient(ellipse 90% 80% at 50% 38%, #2a2d38 0%, #20232c 45%, #14161c 100%); /* ── モーダルのスクリム（背面を覆う暗幕） ── */ --scrim: rgba(8, 9, 12, 0.65); --scrim-blur: 6px; /* ── トランジション ── */ --t-fast: 0.18s ease; /* ================================================================= レイヤー（z-index） ----------------------------------------------------------------- ★ ログインオーバーレイは必ずモーダルより前面に置くこと ★ 移行前は dashboard（70/75）と settings（80）のモーダルが #loginOverlay（60）より前面で、モーダルを開いたままセッションが 失効するとログイン画面が裏に隠れて操作不能になっていた。 この順序は scripts/verify_frontend_assets.py [17] が検査する。 50 未満は各コンポーネント内のローカルな重なり（sticky なテーブル ヘッダー等）に使う領域で、ここでは名前を与えない。 ================================================================= */ --z-drawer: 50; /* サイドドロワー（会話履歴 / ダッシュボードのチャット） */ --z-modal: 70; /* モーダルのオーバーレイ */ --z-modal-nested: 75; /* モーダルの上に重なるモーダル（明細一覧） */ --z-login: 90; /* ログインオーバーレイ */ --z-toast: 100; /* トースト（最前面） */ } /* ===================================================================== デザインシステム（DS）トークン — Issue #163 --------------------------------------------------------------------- docs/ui/rheo Design System.dc.html の値をトークン化したもの。 このブロックは【新設のみ】で、上の既存トークンの値は 1 文字も変えて いない。旧画面はここを一切参照しないため描画は不変。 既存トークン（--accent / --text / --ok 等）の値の差し替えは css/ds-tokens.css が行う（impact.html を除く 9 画面が読み込む）。 検査 [5-a]（css ファイル単体の var() 解決は tokens.css + 自ファイルが 基準）を通すため、新設トークンの定義はこのファイルに置く。 ===================================================================== */ :root { /* ── DS ニュートラル（§01） ── */ --ds-white: #F7F8F8; --ds-lightgray: #F2F2F2; --ds-gray: #7F7F7F; --ds-darkgray: #333333; --ds-ink: #141416; /* 明るい塗り（白ピル）上の文字色 */ /* ── セマンティック On-Dark / Fill（§02b）── テキスト・アイコンには On-Dark（明）、塗り・枠には Fill（濃）。 On-Dark 側の ok/err/warn は ds-tokens.css が既存トークンを 差し替える。ここには現在存在しない変種だけを新設する。 */ --info: #4DA3FF; /* Information On-Dark */ --info-fill: #2E7BE0; --ok-fill: #1FA968; --err-fill: #E23A3A; --warn-fill: #E0A400; /* ── AI アクセント（スペクトラムグラデーション） ── 枠・グロー・進行インジケータに限定使用。乱用しない。 */ --ai-gradient: linear-gradient(90deg, #4796E3, #6D7BE0, #9C6FE4, #E8688F, #F2A03C, #F4C33C); /* ── タイポグラフィ（§03）: フォント 4+1 系統 ── */ --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-ai: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-latin: "Geist", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-mono: "JetBrains Mono", "Consolas", monospace; --font-display: "Montserrat", sans-serif; /* 36px 以上の欧文ディスプレイ専用 */ /* ── タイポグラフィ（§03）: 型階層 ── */ --fs-display: 40px; /* 700 */ --fs-heading: 24px; /* 700 */ --fs-subhead: 18px; /* 500 */ --fs-body-ds: 15px; /* 400（--fs-body=14px は旧画面用に温存） */ --fs-chat: 14.5px; /* AI 発話 400–500 */ --fs-caption: 12px; /* 400 */ --fs-code: 13px; /* 400 */ --fs-numeric: 28px; /* 600 / tabular-nums */ --lh-heading: 1.3; --lh-body: 1.8; --lh-chat: 1.85; /* ── スペーシング（4px ベーススケール） ── */ --sp-4: 4px; --sp-8: 8px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; /* ── 角丸（DS モック実測値） ── */ --r-panel: 28px; /* §07 サイドパネル */ --r-card: 16px; /* カード・モーダル・アラート大 */ --r-field: 12px; /* 入力欄・小アラート */ --r-icon: 13px; /* レール内アイコンボタン */ /* ── §07 Translucent Panel（半透明サーフェス一式） ── */ --panel-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)), rgba(20,20,23,0.62); --panel-glass-border: rgba(255,255,255,0.16); --panel-glass-blur: blur(30px) saturate(140%); --panel-glass-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.28); --hairline: rgba(255,255,255,0.14); /* ── フォーカスリング（§04 STATES — Focus） ── */ --focus-ring: 0 0 0 3px rgba(77,163,255,0.6); }