/* command-center-serving/public/tokens.css CC UI/UXデザイン標準 v1.0 §2 — デザイントークン唯一のソース。 採寸値は Fidelity Tokens v1.6（docs/ssot/cw-devos-command-center-fidelity-tokens-v1_6.md）が Blueprints v2.0 BP-NUM / UI標準 §2 を参照実測で上書きする（衝突時は v1.6 が勝つ）。 全色・全寸法はここでのみ定義（コンポーネント内の生hex/生px色指定は禁止・grep検査対象）。 テーマ解決 = × の4組合せで 同一トークン名を再解決する（§2 実装規律）。初期値=OS設定・手動切替は shell.js が永続。 soft(ピル背景)系は color-mix で基色から導出（追加hexを増やさない）。 */ /* ── 2-1. 共通トークン（面・テーマ非依存）── Fidelity Tokens v1.2 実測値 ── */ :root { /* FT-3 カードradius 16・内包部品12・バー/入力8 */ --radius-sm: 8px; /* 入力・ボタン・バー角丸 */ --radius-md: 12px; /* カード内包部品・active ピル角丸12 */ --radius-lg: 16px; /* 標準カード（FT-3） */ --radius-xl: 16px; /* 主要カードも16へ統一（FT-3 実測補正・旧20） */ --radius-pill: 999px; /* ピル radius（FT-9 実測: 完全ピル） */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* キャンバス余白: 32(desktop)/24(tablet)/16(mobile) */ --canvas-pad: var(--space-6); /* FT-14 書体エンジン: 幾何系グロテスク先頭（repo同梱フォントなし→system系・CDN禁止）+ Noto Sans JP */ --font-sans: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; /* FT-4 タイポ階層: h1=27・hero=44〜48・カード見出し15・ラベル12・本文14 */ --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 27px; --fs-7: 44px; /* FT-4 KPI 数値: 40(単独ヒーロー) / 34(3枚組)・tabular（v1.1 の 56/44 は過大 — 実測補正） */ --kpi-size-1: 40px; /* 単独ヒーロー */ --kpi-size-2: 34px; /* 3枚組 */ /* FT-18 light 影（この1段のみ・多重の重い影は禁止） */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.05); --tap-min: 44px; /* §5 タップ目標 */ /* FT-21 サイドバー: 幅240〜256・項目高40・アイコン18 */ --sidebar-w: 248px; --sidebar-item-h: 40px; --icon-sz: 18px; /* FT-9 ピル高28・FT-10 行チップ28・FT-17 テーブル行高52 */ --pill-h: 28px; --chip-sz: 28px; --row-h: 52px; /* FT-5 ドーナツ外径150/線幅15（140以上/14〜16）・スパークライン高40 */ --donut-d: 150px; --donut-w: 15px; --spark-h: 40px; /* FT-2 ヘッダ円形アイコンボタン36（SVG18のみ）・主要アクション r10 */ --iconbtn-sz: 36px; --radius-btn: 10px; /* FT-20⑦ 値コールアウトチップ = dark面でも白地＋文字黒（テーマ非依存の署名表現） */ --callout-bg: #FFFFFF; --callout-text: #111827; --callout-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); /* FT-31 accent 塗り面上の前景（白）— テーマ非依存（accent カレンダー等の白文字/白ピル用） */ --on-accent: #FFFFFF; /* FT-19 遷移 150ms ease */ --tr: 150ms ease; } /* ── 2-2. Surface-C（顧客面）── C-light（既定・FT-18 ライト面深度） ── */ :root[data-surface="c"][data-theme="light"] { --bg: #F5F6F8; /* FT-18 純白地禁止 */ --surface: #FFFFFF; --surface-raised: #FFFFFF; --hover-bg: #F2F4F7; /* FT-19 light hover地 */ --raised-shadow: var(--shadow-card); --text-1: #111827; --text-2: #6B7280; --line: #E9EBF0; /* FT-18 カード1px枠 */ --divider: #EDEFF3; /* FT-18 インラインKPI縦区切り */ --grid-line: #E9EBF0; /* FT-20③ 点線グリッド（light） */ --accent: #6C5CE7; /* FT-23 vivid 青紫（旧 #4F46E5 くすみ紫を実色化） */ --accent-hover: #5B4BD6; /* FT-23 accent hover */ --ok: #10B981; --warn: #F59E0B; --info: #3B82F6; --err: #EF4444; /* 顧客面では最小使用（§9-⑦） */ --halt: var(--err); /* C面は halt を err に畳む（内部SEVを見せない §4-1） */ --accent-2: var(--accent); } /* ── 2-2. Surface-C — C-dark（FT-1 実測補正: 地は深く・カードは1段浮く） ── */ :root[data-surface="c"][data-theme="dark"] { --bg: #0A0B0E; /* FT-1 据置（グレー#1x禁止は --bg のみ） */ --surface: #13151A; /* FT-1 実測 Δ≈4〜6% 浮き */ --surface-raised: #191C23; /* FT-1/FT-19 hover・段差の1段 */ --raised-shadow: none; --text-1: #F2F4F7; /* FT-4 */ --text-2: #7A828F; /* FT-4 */ --line: rgba(255, 255, 255, 0.06); /* FT-1 ヘアライン上限 */ --divider: rgba(255, 255, 255, 0.06); --grid-line: rgba(255, 255, 255, 0.09); /* FT-20③ 点線グリッド（dark 白8〜10%） */ --accent: #818CF8; --accent-hover: #6E79E9; --ok: #34D399; --warn: #FBBF24; --info: #60A5FA; --err: #F87171; --halt: var(--err); --accent-2: #E7E2A8; /* FT-23 dark 二色系列の相方（淡黄） */ } /* ── 2-3. Surface-S（CEO面）── S-dark（既定・FT-1 実測: 完全な黒 + カード浮き） ── */ :root[data-surface="s"][data-theme="dark"] { --bg: #08090C; /* FT-1 据置（CEO指摘「完全な黒」・参照3基調） */ --surface: #14161C; /* FT-1 実測補正（v1.1 #111318 は浮きが弱い） */ --surface-raised: #1B1E25; /* FT-1/FT-19 hover・段差の1段 */ --raised-shadow: none; --text-1: #F2F4F7; --text-2: #7A828F; --line: rgba(255, 255, 255, 0.06); --divider: rgba(255, 255, 255, 0.06); --grid-line: rgba(255, 255, 255, 0.09); --accent: #7C6CF0; /* バイオレット=orb系譜 */ --accent-hover: #8B7BF5; --accent-2: #E7E2A8; /* FT-23 ペールゴールド=計器・強調（dark 二色系列相方） */ --ok: #34D399; --warn: #FBBF24; --err: #F87171; --info: var(--accent); --halt: #C084FC; /* 紫=最重症の視覚固有性（専用アイコン併用） */ } /* ── 2-3. Surface-S — S-light（同系明度調整・FT-18） ── */ :root[data-surface="s"][data-theme="light"] { --bg: #F5F6F8; --surface: #FFFFFF; --surface-raised: #FFFFFF; --hover-bg: #F2F4F7; --raised-shadow: var(--shadow-card); --text-1: #111827; --text-2: #6B7280; --line: #E9EBF0; --divider: #EDEFF3; --grid-line: #E9EBF0; --accent: #6C5CE7; /* FT-23 vivid 青紫（旧 #6D5BE8 くすみ紫を実色化） */ --accent-hover: #5B4BD6; --accent-2: #B49A2E; --ok: #059669; --warn: #B45309; --err: #DC2626; --info: var(--accent); --halt: #9333EA; } /* ── FT-23 カテゴリ配色パレット（--cat-1〜5・テーマ別・面非依存）── 複数系列チャート・凡例・種別別バー・stacked bar は本パレットから割当（同一hue tint での系列分けを禁止＝lavender-wash 根絶）。 意味図（状態・期限・成否）は semantic（--ok/--warn/--err）優先・cat はカテゴリ分類図のみ（FT-23 適用境界）。 */ :root[data-theme="light"] { --cat-1: #6C5CE7; /* 紫 */ --cat-2: #8FA9C9; /* スレート青 */ --cat-3: #9AD9C0; /* ミント */ --cat-4: #CFE39A; /* ライム */ --cat-5: #F5A623; /* 琥珀 */ } :root[data-theme="dark"] { --cat-1: #A78BFA; /* 明ラベンダー（dark チャート主系列） */ --cat-2: #E7E2A8; /* 淡黄 */ --cat-3: #6FCF97; /* 緑 */ --cat-4: #7E9CC0; /* 青灰 */ --cat-5: #F2B441; /* 琥珀 */ } /* ── 導出トークン（基色から color-mix — 追加の生色を持たない） ── */ :root { /* FT-23 cat 塗り面の 25% tint（凡例地・種別チップ地・stacked セグメントの淡塗り用） */ --cat-1-soft: color-mix(in srgb, var(--cat-1) 25%, var(--surface)); --cat-2-soft: color-mix(in srgb, var(--cat-2) 25%, var(--surface)); --cat-3-soft: color-mix(in srgb, var(--cat-3) 25%, var(--surface)); --cat-4-soft: color-mix(in srgb, var(--cat-4) 25%, var(--surface)); --cat-5-soft: color-mix(in srgb, var(--cat-5) 25%, var(--surface)); --ok-soft: color-mix(in srgb, var(--ok) 14%, var(--surface)); --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--surface)); --err-soft: color-mix(in srgb, var(--err) 14%, var(--surface)); --info-soft: color-mix(in srgb, var(--info) 14%, var(--surface)); --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface)); --halt-soft: color-mix(in srgb, var(--halt) 16%, var(--surface)); --bg-muted: color-mix(in srgb, var(--text-2) 8%, var(--surface)); --focus-ring: var(--accent); /* FT-16 増減バッジ: --pos/--neg + 各10〜15%地 */ --pos: var(--ok); --neg: var(--err); --pos-bg: color-mix(in srgb, var(--pos) 12%, var(--surface)); --neg-bg: color-mix(in srgb, var(--neg) 12%, var(--surface)); } /* FT-19 hover地: dark=raised（1段明）。light は各テーマ節で #F2F4F7 を明示。 */ :root[data-theme="dark"] { --hover-bg: var(--surface-raised); } /* ── SCUX-244 §UI詳細仕様 v1.1（U-1 基盤スケール／U-2 判定色／U-3〜U-8 部品採寸）── 244 pack の確定値トークン。生値はコンポーネントに書かない（本節が唯一の定義点）。 U-2 判定色は既存意味色トークンへの写像（新規 hex ゼロ）: 好調=緑(--ok)・順調=青(--info)・ 要注意=琥珀(--warn)・要対応=赤(--err)。適用は バッジ(10%淡地+同色文字) と 左縁3px の2箇所のみ。 */ :root { /* U-1 基盤スケール */ --u-container: 1320px; --u-pad-x: 24px; --u-pad-x-m: 16px; --u-col-gap: 20px; --u-sec-gap: 32px; --u-card-pad: 20px; --u-card-pad-m: 16px; --u-fs-aux: 11px; /* 11/400 補助 */ --u-fs-label: 12px; /* 12/400 label */ --u-fs-body: 13px; /* 13/400 本文小 */ --u-fs-card: 15px; /* 15/600 カード見出し */ --u-fs-sec: 20px; /* 20/700 セクション見出し */ --u-fs-kpi: 28px; /* 28/700 KPI値 */ --u-fs-hero: 34px; /* 34/700 Zone1ヒーロー値 */ --u-fs-unit: 13px; /* 単位（値の後ろ・13/400） */ --u-radius: 12px; --u-border: 1px; --u-accent-bar: 3px; /* カード/セクション左縁アクセント */ /* U-3 KPIタイル */ --u-spark-h: 28px; --u-tile-min: 150px; /* U-4 部門カード */ --u-dept-min: 230px; /* U-6 チャート・一覧 */ --u-chart-h: 200px; --u-row-h: 40px; /* U-2 判定色（写像・生hexゼロ） */ --judge-good: var(--ok); --judge-fine: var(--info); --judge-watch: var(--warn); --judge-act: var(--err); --judge-good-soft: color-mix(in srgb, var(--ok) 10%, var(--surface)); --judge-fine-soft: color-mix(in srgb, var(--info) 10%, var(--surface)); --judge-watch-soft: color-mix(in srgb, var(--warn) 10%, var(--surface)); --judge-act-soft: color-mix(in srgb, var(--err) 10%, var(--surface)); /* U-7 platformチップ（識別用の薄背景・彩度低・意味色と衝突しない） */ --u-pf-chip-bg: color-mix(in srgb, var(--text-2) 10%, var(--surface)); } /* ── SCUX-246 V-1（裁定 D-B）: 鮮度バナーの発火閾値（config トークン・唯一の定義点）── 単位=時間。既定 24 = §3-11「KPI は日次更新で足りる」に整合。 閾値の直値をコード（app.js）に置かない。app.js は本宣言を getComputedStyle で読み、 読めない場合は「判定不能 → 発火しない」（parts.js isStale）に倒す。 */ :root { --u-stale-after-hours: 24; } /* ── SCUX-245 SEG-1 (A-12): AVIS 常駐ウィジェットの確定寸法・位置・重なり順 ── */ :root { --avis-fab-h: 44px; /* desktop ピル高 */ --avis-fab-pad-x: 16px; /* desktop ピル左右 padding */ --avis-fab-inset: 24px; /* desktop 右下からの距離 */ --avis-fab-d-m: 52px; /* mobile 円形径 */ --avis-fab-inset-m: 16px; /* mobile 右下からの距離 */ --tabbar-h: 56px; /* mobile 下部ナビ高（app.css .sheet bottom:56px と同値・非干渉の基準） */ --z-avis-fab: 25; /* tabbar(20) より上・cmdk(40)/modal(44) より下 */ } /* ── L3 進捗盤（/progress・内部 dev 盤 — 顧客面/CEO面テーマとは独立の固定ダーク） ── */ :root { --l3-bg: #0f1115; --l3-surface: #161a22; --l3-line: #2a2f3a; --l3-line-soft: #1e2430; --l3-text: #e6e6e6; --l3-text-2: #9aa3b5; --l3-text-3: #8b93a7; --l3-chip-text: #c7cede; --l3-muted: #6b7280; --l3-todo: #6b7280; --l3-recon: #3b82f6; --l3-wip: #f59e0b; --l3-done: #22c55e; --l3-verified: #15803d; --l3-blocked: #ef4444; --l3-halt: #eab308; }