/* --------------------------------------------------------------------------- * ★★★ 色の差し替え点（OEM）——★この1枚だけで全画面の風合いが変わる * * ★配るときの置き場: config/branding/assets../colors.css * ★コンテナの中: /config/brand/colors.css → /brand/colors.css?v=<8桁> * ★画面は styles.css の**後ろ**で読む。★後勝ちなのでこちらが勝つ * （★実測: ★生成物に @layer は 0 件。Tailwind が平らにしている）。 * * ★★ styles.css にも同じ 48 個の既定値が入っている（★作者裁定）。 * ★配り忘れても画面が真っ黒にはならない ——★その代わり、 * ★「黙って fireflake の色」になるのを★機械3枚で守る * （★dc.sh の門 ／ ★検査器 ／ ★網）。 * ★★ 48 個すべてを書くこと（★欠けるとその色だけ既定へ落ちる）。 * * ★値は「R G B」の3数値（空白区切り）。★rgb(var(--x) / 0.5) で透過も作れる。 * ------------------------------------------------------------------------- */ :root { /* ----------------------------------------------------------------------- * ★★★ OEM の差し替え点 —— ★ここだけ変えれば全画面の風合いが変わる * * ★値は「R G B」の3数値（空白区切り）。★rgb(var(--x) / 0.5) で透過も作れる。 * ★2026-09-06 時点の値は★現在の見た目をそのまま写したもの（★変化ゼロ）。 * --------------------------------------------------------------------- */ --ff-brand: 17 24 39; /* 主操作の枠・最も濃い色 */ --ff-brand-surface: 31 41 55; /* 主操作の地 */ --ff-brand-hover: 0 0 0; /* 主操作にカーソルを載せた時 */ --ff-on-brand: 255 255 255; /* 主操作の上に載る文字 */ /* ★ 2026-09-06 実測: 移行前の user の副次ボタンは★薄灰 ×8 / 白 ×4 だった。 * ★白にしたら「前より美しくない」と指摘された（→ 0014 §54）。★薄灰が正。 */ --ff-surface: 249 250 251; /* 副操作の地 */ --ff-surface-hover: 243 244 246; /* 副操作にカーソルを載せた時 */ --ff-line: 209 213 219; /* 枠線 */ /* ★ サイドバーの地と、そこに載る項目のカーソル反応（★2026-09-07・§67）。 * ★--ff-surface-hover（gray-100）では★gray-50 の地の上で★6/255 しか動かず * ★実質見えない。★実測でここは★gray-200（20/255）が使われており、 * ★これは★匿名の差ではなく★「反応が見える」という機能である。 * ★★OEM ではサイドバーは★最も目に入る面なので★差し替え点として持つ。 */ --ff-nav-hover: 229 231 235; /* ナビ項目にカーソルを載せた時 */ --ff-ink: 55 65 81; /* 標準の文字 */ /* ★★ 2026-09-07（§67）: gray-400 → gray-500 に濃くした。 * ★以前の値は★白地で 2.54:1 で、★WCAG AA（4.5:1）に遠く届かない。 * ★.btn-ghost と .btn-dashed の★文字が読めなかった（実測7箇所）。 * ★★「弱い」は意味だが★「読めない」は意味ではない。 * ★gray-500 は白地 4.83 / gray-50 地 4.63 で★どちらも AA を満たす。 */ --ff-ink-muted: 107 114 128; /* 弱い文字（地なしボタン・表の見出し） */ --ff-danger: 220 38 38; /* 危険の文字 */ --ff-danger-surface: 254 242 242; /* 危険の地 */ --ff-danger-line: 254 202 202; /* 危険の枠 */ --ff-danger-hover: 254 226 226; /* 危険にカーソルを載せた時 */ /* ★ 地を持たない危険（.btn-ghost.btn-danger）の★平常時と hover の文字色。 * ★作者判断（2026-09-07）:「★地なしのまま★平常時から赤」。 * ★★理由: 表の行内で「削除」と「編集」が★平常時1段しか違わず、 * ★押す前に危険が伝わっていなかった（→ §66-5）。 */ --ff-danger-strong: 185 28 28; /* 危険にカーソルを載せた時の文字 */ /* ★★ 2026-09-07 新設（§67）: ★回復・肯定の操作（論理削除からの復元）。 * ★作者判断:「btn-positive を建てる」——★赤の『削除』と対になり、 * ★意味の差が★姿の差として残る。 * ★green-800。★白文字で 7.13:1。★green-600（3.30）は AA 未達だった。 * ★状態の緑（稼働中＝薄地チップ）とは★姿が違うので混ざらない。 */ --ff-positive: 22 101 52; /* 回復の操作の地 */ --ff-positive-surface: 240 253 244; /* 回復を伝える器の地 */ --ff-positive-line: 187 247 208; /* 同・枠 */ /* ★ 警告（★2026-09-07・§70）: ★危険でも回復でもないが★注意を要すること。 * ★実例:「この契約は期限切れです。★延長すると開始時刻が現在へリセットされます」。 * ★琥珀。★amber-800 × amber-50 で 6.84:1。 */ --ff-warning: 146 64 14; /* ★★ 2026-09-07（§80）: ★テンプレートの色を移すために足した2つ。 * ★★作者裁定「案B: ★値を保ったまま名前を付ける」—— * ★いまは★配り方の変更であって★見た目の変更ではない。 * ★見た目を変えるなら★別の一手として★実物を見ながら決める。 */ --ff-ink-faint: 156 163 175; /* いちばん弱い（gray-400・★44箇所） */ /* ★★ 2026-09-07（§83）: ★後ろを覆う幕。 * ★実測で★3通りに割れていた —— * .overlay rgb(17 24 39 / 0.4) * sidebarOverlay bg-black bg-opacity-30（★4枚のレイアウト） * command-modal bg-black/50 * ★★どれも「★後ろを覆う」という★同じ意味である。 * ★作者の原則「★意味が同じなのに色が違うものは統一していい」に従って * ★.overlay の値へ畳んだ。 */ --ff-scrim: 17 24 39; /* 後ろを覆う幕（★不透明度は使う側が持つ） */ /* ★★ 2026-09-07（§83）: ★「いま保存が通った」を★0.2秒だけ点す色。 * ★JS が classList.add して★すぐ remove する（advanced_control / components）。 * ★★値は --ff-state-activated-bg と同じだが★意味が違う —— * ★あちらは「利用者に渡った」という★状態、 * ★こちらは「たったいま動いた」という★一瞬の合図である。 */ --ff-flash-saved: 239 246 255; /* ★ 「定型コマンドを差し込んだ」を★0.4秒だけ点す（basic_control）。 * ★★--ff-state-soon と★枠が同値だが★意味が違う —— * ★あちらは「もうすぐ切れる」、★こちらは「たったいま入れた」。 */ --ff-flash-filled: 254 252 232; --ff-flash-filled-line: 250 204 21; /* ★ 標準（--ff-ink・gray-700）と★弱い（--ff-ink-muted・gray-500）の間。 * ★実測 104箇所。★表の副次的な説明文と★補足に使われている。 * ★★値は★--ff-state-neutral-ink と同じだが★意味が違う —— * ★あちらは「状態が中立である」こと、★こちらは「文字が一段弱い」こと。 */ --ff-ink-soft: 75 85 99; /* 一段弱い（gray-600・★104箇所） */ --ff-warning-surface: 255 251 235; --ff-warning-line: 253 230 138; --ff-positive-hover: 20 83 45; /* 同・カーソルを載せた時 */ --ff-on-positive: 255 255 255; /* 同・上に載る文字 */ /* ★ 入力欄の地。★副操作の地（--ff-surface）とは★別に持つ —— * ★「押す物」と「書き込む物」は★別の意味だからである。 */ --ff-field: 255 255 255; /* ----------------------------------------------------------------------- * ★★ ①の次元 —— ★ここに1つしか値が無いので、★割れようがない * --------------------------------------------------------------------- */ --ff-radius: 0.125rem; /* 角のカーブ（実測: user の総意 rounded-sm） */ --ff-border: 1px; /* 境界線の太さ */ --ff-motion: 150ms; /* 遷移の速さ */ --ff-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* 影の質 */ --ff-focus-width: 2px; /* focus の輪の太さ */ /* ★★ 器の角（§67）。★部品（--ff-radius 0.125rem）とは★別に持つ。 * ★実測: admin のカード12箇所は★すべて rounded-lg(0.5rem)。 * ★『器と部品で角が違う』ことを★②として認め、★名前で表明する * ——★匿名の差にはしない（★作者の原則）。 */ --ff-radius-card: 0.5rem; /* ----------------------------------------------------------------------- * ★★★ 状態の色（★2026-09-07 新設・→ 0014 §79） * * ★これまでは★Python の helper が★bg-cyan-800 のような★Tailwind の色名を * ★直に持っていた。★→ ★styles.css を差し替えても★変わらなかった。 * ★→ ★helper は★意味の名前（state-active 等）を返し、★色は★ここが持つ。 * * ★★ 値は★移行前と★1つも変えていない（★実測で証明・test_state_pixel_identity.py）。 * ★これは★配り方の変更であって★見た目の変更ではない。 * * ★ 既存のトークンで足りるものは★足さない（★実測で14/24が足りた）: * 予約済の地 = --ff-surface 期間終了の地 = --ff-surface-hover * 稼働中の地 = --ff-positive-surface 同・枠 = --ff-positive-line * 停止中の地 = --ff-danger-surface 同・文字 = --ff-danger-strong * 枠 = --ff-line 白文字 = --ff-on-brand * 抹消の地 = --ff-ink-muted（gray-500 と同値） * --------------------------------------------------------------------- */ --ff-state-neutral-ink: 75 85 99; /* 中立の文字（gray-600） */ /* ★★ 2026-09-07（§80）: ★--ff-state-active-ink から★改名した。 * ★.state-active は★地と枠を★既に --ff-positive-surface / -line から * 取っており、★文字だけ state 名前空間に居るのは★割れである。 * ★原則4「★意味が同じものには★同じ名前を」。★値は1つも変えていない。 * ★テンプレートの text-green-700（7箇所）も★この名前を指す。 */ --ff-positive-ink: 21 128 61; /* 薄い緑の上に載る文字（green-700） */ --ff-state-unlinked: 21 94 117; /* 設定が未完了（cyan-800） */ --ff-state-unknown: 30 41 59; /* 分からない（slate-800） */ --ff-state-soon: 250 204 21; /* もうすぐ切れる・地（yellow-400） */ --ff-state-soon-ink: 0 0 0; /* 同・文字（黒） */ --ff-state-activated-bg: 239 246 255; /* 利用者に渡った（blue-50） */ --ff-state-activated-ink: 29 78 216; /* 同・文字（blue-700） */ --ff-state-activated-line: 191 219 254;/* 同・枠（blue-200） */ --ff-state-returned-bg: 250 245 255; /* 戻ってきて再利用可（purple-50） */ --ff-state-returned-ink: 107 33 168; /* 同・文字（purple-800） */ --ff-state-returned-line: 233 213 255; /* 同・枠（purple-200） */ }