/* ===== Phase S1b: Gup semantic design token ===== 正本 docs/GUP_UI_BASIC.md ここは「意味の名前」だけを定義する。色そのものの名前（--blue 等）は作らない。 既存の base.css の色名 property は削除せず、当面は共存させる（置き換えは S1e）。 ★ここでの定義は :root への追加のみ。①〜⑥ の既存 class は一切変更しない。 */ :root{ /* --- font family（正本はここ 1 か所） -------------------------------------- 欧文と数字は Segoe UI、和文は Meiryo UI。 ★font stack は「字ごとにさかのぼる」ので、Segoe UI を先頭へ置くだけで ローマ字・数字だけが Segoe UI になり、日本語はそのまま Meiryo UI へ落ちる。 金額表を読むアプリなので、数字が等幅で桁がそろうことを優先する （実測：Segoe UI の 0〜9 は幅のばらつき 0px。Arial は 3.56px あるので候補にしない）。 どれも OS 同梱フォントなので外部参照は増えない（offline 維持）。 以降は Segoe UI / Meiryo UI が無い環境（macOS / Linux）のための順送り。 */ --gup-font-sans:"Segoe UI","Meiryo UI","Meiryo","Hiragino Sans","Yu Gothic","Noto Sans JP",-apple-system,sans-serif; /* ロゴ（ヘッダの Gup）だけに使う書体。字形が SemiBold なので weight は regular のまま置く。 実体は styles/brand-font.css に data: URI で埋め込んである（外部 font は読まない）。 */ --gup-font-brand:"Orbitron SemiBold",var(--gup-font-sans); /* --- typography（7 段階） --------------------------------------------------- */ --gup-fs-note:12px; /* 注釈のみ */ --gup-fs-sm:14px; /* 補助情報・table 本文 */ --gup-fs-base:16px; /* 本文・label・input・button */ --gup-fs-lg:18px; /* section heading */ --gup-fs-xl:20px; /* screen heading */ /* UI-TYPE2：24px は 6 段に無い。この token は「主役の 1 段下」として使われていた （③ 全体計画の 5 つの数字・狭い画面での主役の縮小）ので、xl（20px＝結論の値）の別名にする。 */ --gup-fs-kpi:var(--gup-fs-xl); /* 結論の値と同じ段（20px） */ /* UI-TYPE2（Founder 判断）：文字の大きさは ① 付加価値（MQ）を正本にした 6 段だけ。 28 画面の主役の数字（1 画面 1 つ） ／ 20 結論の値・カードの見出し ／ 18 画面名 16 表の数値・入力・ボタン ／ 14 名前・本文・ラベル・補足 ／ 12 列見出し ★グラフの中の文字（SVG）は図の一部なので、この段の外として扱う。 ★hero(32px) は「主役の数字」と役割が同じだったので display(28px) へそろえた （別名は残す。呼び口が 8 か所あり、意味は「1 画面 1 個の最重要」で変わらないため）。 */ --gup-fs-display:28px; /* 画面の主役の数字・大きな見出し */ --gup-fs-hero:28px; /* 最重要 KPI（1 画面 1 個）。display と同じ段 */ /* --- typography（High-Density 追加段。GUP-HIGH-DENSITY-UI1 ALL VIEWS・DESIGN.md §2.6/§5.1） --- ★旧「12px 未満禁止・6 段だけ」は撤回済み。密度のために文字を縮めてよい（10px が床）。 上の 6 段は 1 つも変えず、その間・下を埋める追加トークンだけを足す。 10px 未満は使わない・長文本文を 10px にしない・主役の数字を小さくしない、が原則。 */ --gup-fs-micro:10px; /* 補助メタデータの床（差分の単位・件数） */ --gup-fs-2xs:11px; /* 表・control の label・小 badge */ --gup-fs-xs:13px; /* 高密度な通常本文（狭い列・compact row） */ --gup-fs-sm2:15px; /* section 見出しの下限（高密度画面） */ --gup-fs-md:17px; /* major numeric の下限 */ --gup-fs-xl2:22px; /* major numeric の上限・hero の下限 */ /* --- font weight（Phase UI-TYPE1） --------------------------------------- Meiryo UI の物理ウェイトは Regular(400) と Bold(700) の 2 段階しかない。 500 / 600 / 800 / 900 を指定しても実画面ではどちらかへ収束し、意味の差を作れない。 だから **物理は 2 段階だけ**にして、意味は semantic token の名前で分ける。 */ --gup-font-weight-regular:400; --gup-font-weight-bold:700; /* 役割ごとの weight（component はこちらを参照する） */ --gup-type-body-weight:var(--gup-font-weight-regular); /* 本文・説明・note */ --gup-type-caption-weight:var(--gup-font-weight-regular); /* caption・helper */ --gup-type-label-weight:var(--gup-font-weight-regular); /* field label */ --gup-type-input-weight:var(--gup-font-weight-regular); /* 入力中の値 */ /* FOUNDER-WALKTHROUGH-FIX3（W10・Founder 指示）：③ の打ち手（変化率）の欄だけ Bold。 ここは「その行で利用者が決める値」＝情報階層の主役なので、装飾ではなく階層として太くする。 ほかの入力欄は --gup-type-input-weight（Regular）のまま。 */ --gup-type-lever-input-weight:var(--gup-font-weight-bold); --gup-type-heading-weight:var(--gup-font-weight-bold); /* page / section / panel 見出し */ --gup-type-selected-weight:var(--gup-font-weight-bold); /* 選択中のナビ */ --gup-type-nav-weight:var(--gup-font-weight-regular); /* 非選択のナビ */ --gup-type-primary-action-weight:var(--gup-font-weight-bold); /* 主要な実行ボタン */ --gup-type-secondary-action-weight:var(--gup-font-weight-regular); --gup-type-table-header-weight:var(--gup-font-weight-bold); --gup-type-table-body-weight:var(--gup-font-weight-regular); --gup-type-total-weight:var(--gup-font-weight-bold); /* 合計・総合計 */ --gup-type-kpi-label-weight:var(--gup-font-weight-regular); --gup-type-kpi-primary-weight:var(--gup-font-weight-bold); /* 画面の最重要 KPI だけ */ --gup-type-badge-weight:var(--gup-font-weight-bold); /* 短い badge ラベル */ --gup-type-alert-heading-weight:var(--gup-font-weight-bold); /* 警告・エラーの見出し */ --gup-type-alert-body-weight:var(--gup-font-weight-regular); /* 警告・エラーの本文 */ /* 旧名（既存 class が参照している。値は上の 2 段階へ収束させる） */ --gup-fw-normal:var(--gup-font-weight-regular); --gup-fw-medium:var(--gup-font-weight-regular); /* UI-TYPE1: 500 は Regular へ */ --gup-fw-semibold:var(--gup-font-weight-bold); /* UI-TYPE1: 600 は Bold へ */ --gup-lh-compact:1.25; --gup-lh-normal:1.5; --gup-lh-heading:1.3; /* UI-TYPE5：日本語の本文・説明・補足の行送り。単語間に空白が無いぶん、欧文の 1.5 では詰まる。 */ --gup-lh-body:1.75; /* UI-TYPE5：本文 1 行の長さの上限（全角でおよそ 42 字）。これを超えると次の行頭へ目が戻れない。 */ --gup-measure:42em; /* --- spacing（7 段階） ----------------------------------------------------- */ --gup-sp-1:4px; /* label と補助値 */ --gup-sp-2:8px; /* control 内部 */ --gup-sp-3:12px; /* compact group / table cell */ --gup-sp-4:16px; /* 通常 control 間 */ --gup-sp-5:24px; /* section 内部 */ --gup-sp-6:32px; /* section 間 */ --gup-sp-7:48px; /* 大区切り */ /* --- radius（3 段階） ------------------------------------------------------ */ --gup-radius-sm:6px; /* input / select / small control */ --gup-radius-md:10px; /* card / drawer section / modal */ --gup-radius-pill:999px; /* badge のみ */ /* --- shadow（2 段階） ------------------------------------------------------ */ --gup-shadow-none:none; /* 通常 card は border のみ */ --gup-shadow-overlay:0 12px 32px rgba(23,32,42,.18); /* modal / drawer だけ */ /* --- control height（2 種類だけ） ----------------------------------------- */ --gup-control-standard:40px; /* 通常 button / input / select / textarea */ --gup-control-compact:34px; /* 月次 12 か月 table 内・高密度入力・compact filter */ /* --- control の内部寸法（Phase UI-SYSTEM1-1B2）----------------------------- 高さの正本は上の 2 つ。ここでは**同義の別名を作らない**（重複定義を避ける）。 追加するのは「高さを 40 / 34 に着地させるための内部寸法」だけ。 */ --gup-control-padding-block-standard:var(--gup-sp-2); /* 8px 上下 */ --gup-control-padding-block-compact:var(--gup-sp-1); /* 4px 上下 */ --gup-control-padding-inline-standard:var(--gup-sp-3); /* 12px 左右 */ --gup-control-padding-inline-compact:var(--gup-sp-2); /* 8px 左右 */ /* 入力欄とその単位（「円」「%」「人」）のあいだ */ --gup-control-unit-gap:var(--gup-sp-2); /* textarea は固定高にしない。**下限**だけを決めて、行数と内容量で伸びる。 */ --gup-textarea-min-height:calc(var(--gup-control-standard) * 2); /* 80px */ --gup-textarea-min-height-compact:calc(var(--gup-control-compact) * 2); /* 68px */ /* checkbox / radio の四角そのもの（label を含む当たり判定とは別） */ --gup-choice-box-size:18px; /* --- semantic alias（Phase UI-SYSTEM1-1A）--------------------------------- 「値」ではなく「役割」に名前を付ける層。上の scale を指すだけで、値は変えない。 ここがあると、次のフェーズ（UI-SYSTEM1-1B）で余白を揃えるときに、 **この 1 行を書き換えるだけ**で該当する役割の全画面が動く。 いま raw な値で書かれている箇所を、この alias へ寄せていくのが 1B の仕事。 ★役割が違うなら、値が同じでも alias を分ける（無理に 1 つへまとめない）。 */ --gup-page-inline-padding:var(--gup-sp-6); /* 画面の左右余白 */ --gup-page-block-gap:var(--gup-sp-6); /* 画面内の大区切り */ --gup-section-gap:var(--gup-sp-3); /* section の中の縦の間隔 */ --gup-panel-padding:var(--gup-sp-5); /* panel の内側 */ --gup-card-padding:var(--gup-sp-5); /* card の内側 */ --gup-modal-padding:var(--gup-sp-5); /* modal の内側 */ --gup-form-row-gap:var(--gup-sp-3); /* 入力行どうし */ --gup-control-gap:var(--gup-sp-3); /* control どうし */ --gup-table-cell-block-padding:var(--gup-sp-2); /* 表セルの上下 */ --gup-table-cell-inline-padding:var(--gup-sp-3); /* 表セルの左右 */ /* ========================================================================== Gup Color System v1（正本 docs/UI_COLOR1_SYSTEM.md） 2 層構造。**component は semantic だけを参照する**。 palette --gup-p-* 色そのもの。ここ以外から参照しない semantic --gup-* 意味の名前。画面・component はこちらを使う 色は装飾ではなく「落ち着いて経営判断するための情報」。 強い色は意味と操作にだけ使い、面の階層は neutral で作る。 ========================================================================== */ /* --- palette（内部専用。component から直接参照しない） --------------------- */ --gup-p-ink-900:#17202A; /* on #FFF 16.5:1 */ --gup-p-ink-700:#33383F; --gup-p-ink-600:#495260; --gup-p-ink-500:#5C636C; /* on #FFF 6.1:1 */ --gup-p-ink-400:#656B72; /* on #FFF 5.4:1 ／ 最も濃い面 #F2F0EA でも 4.7:1（旧 #6E747B は 4.14:1） */ --gup-p-ink-300:#8A92A0; /* on #FFF 3.1:1（境界用。文字に使わない） */ --gup-p-ink-100:#E3E0D6; --gup-p-paper:#F7F6F1; --gup-p-paper-2:#F2F0EA; --gup-p-paper-3:#FAF9F5; --gup-p-white:#FFFFFF; /* --- GUP-AIR-SURFACE1（Founder 決定 ＝ Variant B）：Air の面の階層 ----------- Air を「白いアプリ」から「淡いグレーの作業面に、穏やかな情報面を置き、 白を主に操作・入力へ残すアプリ」へ変える。 ★白を減らすこと自体が目的ではない。**読む面と触る面が色だけで分かれる**ことが目的。 ★warm（R−B）は既存 palette の上限 13 を超えない（beige 化を機械的に禁じる）。 ★暗い 2 配色はこの段を見ない（themes.css が役割ごと差し替える）。 */ --gup-p-paper-canvas:#E9E6DC; /* ① 作業面（床）。R−B=13 */ --gup-p-paper-content:#F9F8F3; /* ② 情報面（読む場所）。純白をやめるのが要点 */ --gup-p-paper-sunken:#EFECE3; /* 引いた面。床より上・補助面より下 */ --gup-p-ink-110:#D9D6CC; /* 枠線。面が下がったぶん対で 1 段下げる（旧 ink-100 #E3E0D6 は床の上で 1.06:1） */ --gup-p-ink-320:#7A828F; /* control の境界。情報面で 3.65:1 ／ 床で 3.10:1（旧 ink-300 は 2.95:1 で 3:1 未達） */ --gup-p-navy-700:#0F4C9E; /* on #FFF 8.2:1 S83%（旧 #17416F S66%） */ --gup-p-navy-600:#1660C8; /* on #FFF 5.9:1 S80%（旧 #1E5490 S66%）主要操作 */ --gup-p-navy-050:#EAF3FB; --gup-p-blue-600:#2E6DB4; /* on #FFF 5.3:1 */ --gup-p-blue-500:#0B79A8; /* on #FFF 4.9:1 S88%（旧 #1F6FA8 S69%）Forecast。青の中でも cyan 寄りにして主要操作と分ける */ --gup-p-pink-050:#FCEDF7; /* VQ の薄いピンク。MQ会計の箱（--mg-v）と同じ意味の面 */ --gup-p-blue-050:#EEF2FB; --gup-p-blue-200:#CBDCF2; /* 薄い青の枠線。会社盤の領域識別で使う（面ではなく境界） */ --gup-p-cyan-050:#EDF8FD; /* Forecast の soft 面。#0B79A8 を載せて 4.5:1 */ --gup-p-gold-700:#6B4E10; /* on #FFF 7.7:1 S74%（旧 #6D5121 S54%） */ --gup-p-gold-600:#96700F; /* on #FFF 4.5:1 S82%（旧 #8A6A1F S63%）brand accent。白文字を載せられる下限 */ --gup-p-gold-550:#7D5A08; /* on #FFF 6.3:1 S88%（旧 #7A5B15 S71%）Plan */ --gup-p-gold-500:#8C6805; /* on #FFF 5.1:1 S93%（旧 #8A6620 S62%）Budget */ --gup-p-gold-400:#B07F00; /* on #FFF 3.6:1 S100% 枠線・マーカー専用。文字と白文字の下地には使わない */ --gup-p-gold-200:#E6D3A0; --gup-p-gold-050:#FDF7EA; /* 選択面。ごく薄いアンバー */ --gup-p-green-600:#0F7A43; /* on #FFF 5.4:1 S78%（旧 #256B41 S49%） */ --gup-p-green-050:#E6F4EB; --gup-p-green-200:#CBE3D3; --gup-p-teal-600:#216A5E; /* on #FFF 6.4:1（旧 #2E8577 は 4.43:1 で AA 未達） */ --gup-p-lime-050:#EAF1E2; /* 固定費カテゴリのタグ面（--ui-f の背景） */ --gup-p-red-700:#B02318; /* on #FFF 6.8:1 S76%（旧 #8E1F16）破壊的操作だけ */ --gup-p-red-600:#9A3B2C; /* on #FFF 6.9:1 */ --gup-p-red-050:#FBECEA; --gup-p-red-200:#F1CFC9; --gup-p-amber-700:#A55407; /* on #FFF 5.4:1 S92%（旧 #8A4B12 S77%）注意。danger より明るく、危険には見せない */ --gup-p-amber-050:#FDF3E4; --gup-p-violet-600:#6739C7;/* on #FFF 7.0:1 S56%（旧 #5B4A93 S33%）着地見込 */ --gup-p-violet-050:#F1ECFB; /* chart categorical（UI-CANVAS-COLOR1）：**線と凡例を見分けるためだけの色**。 操作の重さ（danger）も業績の良し悪し（positive / negative）も意味しない。 既存の vivid な色（red-700＝破壊的操作／amber-700＝注意／green-600＝良化／violet-600＝着地見込）は すでに意味を持っているので、系列の識別に流用せず別の段を持つ。 色相を離して並べる（218 → 0 → 142 → 26 → 282 → 184deg）ので、隣り合う 2 本でも見分けられる。 */ --gup-p-cat-blue:#1155CC; /* on #FFF 6.6:1 218deg S85% */ --gup-p-cat-red:#C62828; /* on #FFF 5.6:1 0deg S66% */ --gup-p-cat-green:#15803D; /* on #FFF 5.0:1 142deg S72% */ --gup-p-cat-orange:#B45309; /* on #FFF 5.0:1 26deg S90% */ --gup-p-cat-purple:#7B1FA2; /* on #FFF 8.2:1 282deg S68% */ /* ---- 運転資本の箱：買掛金（差し引く側）の紫 ---------------------------- ★V ピンクの濃淡にしない。「在庫と同じもの」に見えて差し引く側だと読めないため （Founder 決定：独立した鮮やかな紫）。Gold は使わない（G / 目標の意味を守る）。 ★塗りの上に載るインクと **対**で決めた実測値： light #7B1FA2 … 白文字 8.2:1 digital #A855F7 … 黒文字 4.6:1（V #FF6BD6 ／ P #5B84FF ／ cG #2DD4D8 と色相が離れている） exec #9E6FD8 … 黒文字 5.0:1 */ --gup-p-wc-pay-600:#7B1FA2; --gup-p-wc-pay-300:#A855F7; --gup-p-wc-pay-400:#9E6FD8; --gup-p-cat-teal:#00767F; /* on #FFF 5.4:1 184deg S100% */ /* OPQR-MU-PRODUCT1：識別色を 12 色相へ広げる（上の 6 つ＋ここの 6 つ）。 ★上の 6 つは 1 文字も変えていない。足りないぶんだけ、色相の隙間へ足す。 12 色相の最小間隔は 26deg（0 / 26 / 55 / 84 / 113 / 142 / 184 / 218 / 250 / 282 / 308 / 334）。 白地の contrast はすべて 4.5:1 以上（実測値をコメントに書く）。 */ --gup-p-cat-grass:#0F7901; /* on #FFF 5.6:1 113deg S98% */ --gup-p-cat-magenta:#BE04A5; /* on #FFF 5.6:1 308deg S96% */ --gup-p-cat-indigo:#664CE6; /* on #FFF 5.6:1 250deg S75% */ --gup-p-cat-olive:#726903; /* on #FFF 5.6:1 55deg S95% */ --gup-p-cat-moss:#467401; /* on #FFF 5.6:1 84deg S98% */ --gup-p-cat-pink:#CB0B5E; /* on #FFF 5.6:1 334deg S90% */ /* 同じ 12 色相の「濃く落ち着いた段」。彩度を 23〜67pt 落としてあるので、 同じ色相でも上の鮮やかな段と読み分けられる。13 番目以降の識別に使う。 */ --gup-p-cat-d-blue:#334971; /* on #FFF 9.0:1 218deg S38% */ --gup-p-cat-d-orange:#654125; /* on #FFF 9.0:1 26deg S46% */ --gup-p-cat-d-grass:#295224; /* on #FFF 9.0:1 113deg S39% */ --gup-p-cat-d-magenta:#73306A; /* on #FFF 8.9:1 308deg S41% */ --gup-p-cat-d-teal:#294F51; /* on #FFF 9.0:1 184deg S33% */ --gup-p-cat-d-indigo:#493A98; /* on #FFF 9.0:1 250deg S45% */ --gup-p-cat-d-olive:#4E4A22; /* on #FFF 9.0:1 55deg S39% */ --gup-p-cat-d-moss:#3D4F21; /* on #FFF 9.0:1 84deg S41% */ --gup-p-cat-d-green:#245235; /* on #FFF 9.0:1 142deg S39% */ --gup-p-cat-d-red:#7C3131; /* on #FFF 9.0:1 0deg S43% */ --gup-p-cat-d-purple:#643579; /* on #FFF 9.0:1 282deg S39% */ --gup-p-cat-d-pink:#792F4F; /* on #FFF 9.0:1 334deg S44% */ /* --- brand --------------------------------------------------------------- ゴールドは「ブランド・現在選択中の主要ナビ・最重要の結論」だけ。 見出し全部／KPI 全部／ボタン全部／通常の枠線／注意／Forecast／危険には使わない。 */ --gup-brand-ink:var(--gup-p-ink-900); --gup-brand-accent:var(--gup-p-gold-600); --gup-brand-accent-soft:var(--gup-p-gold-050); --gup-brand-accent-border:var(--gup-p-gold-200); /* --- Target（目標）と cG（キャッシュG）— GUP-HOME-PROD1 Gate A --------------- ★Target ＝ Gup Orange。**「行き先」を指す 1 つの色**で、利益（G＝Gold）とは別物。 ただし色だけで G と区別させない（指示 §16）。Target には必ず ◆ マーカー ＋ 破線 ＋「目標」の文字を付ける。 ★白地では #FD5E00 が 3.10:1 で本文に使えないので、文字用は 700 の段。 マーカー・破線・塗りはブランドの 500 をそのまま使う（形と位置で見せるので contrast は面で稼がない）。 ★面積で強くしない（指示 §17）。Orange の面を大きくしない。 */ --gup-target:var(--gup-p-orange-700); --gup-target-mark:var(--gup-p-orange-500); --gup-cg:var(--gup-p-cg-700); /* --- 塗りの上のインク（GUP-HOME-PROD1 Gate A）-------------------------------- ★MQ の箱は「塗り」と「その上の文字」が **対**になっている。 明るい配色では P と M が濃い塗り（白文字）、V・Q・F・G が淡い塗り（濃い文字）。 暗い配色では 6 つとも明るい塗りになるので、**6 つとも濃い文字**へ入れ替わる。 ★だから塗りの色（--mg-*）だけをテーマで差し替えると、必ずどちらかが読めなくなる （実測：digital の G は 1.31:1、F は 1.50:1 になっていた）。 ★--gup-text-on-light は「明るい面の上のインク」。--navy（＝画面の文字色）と違い、 配色が変わっても濃いまま。--gup-text-inverse（暗い面の上の白）と対で使う。 */ --gup-text-on-light:var(--gup-p-ink-900); --mg-on-p:var(--gup-text-inverse); --mg-on-v:var(--gup-text-on-light); --mg-on-m:var(--gup-text-inverse); --mg-on-q:var(--gup-text-on-light); --mg-on-f:var(--gup-text-on-light); --mg-on-g:var(--gup-text-on-light); /* ★--ui-*（タグ・線の色）は --mg-*（箱の塗り）と **明るさが逆**。 明るい配色では --ui-q は濃いスレート（白文字）、暗い配色では明るい（濃い文字）。 だから箱のインクとは別に持つ。実測：ここを共用したら air の Q タグが 2.81:1 になった。 */ --ui-on-fill:var(--gup-text-inverse); /* --- GUP-HOME-PROD1 Gate A：暗い配色のための段 --------------------------- ★生の色の正本は tokens.css だけ、という契約を守るためにここへ置く。 themes.css は hex を 1 つも持たず、この段を指し直すだけ。 ★家系を分ける：night ＝ Digital（黒）／ midnight ＝ Executive（濃紺）。 同じ「暗い面」でも色味が違うので、1 つの家系に混ぜない。 */ --gup-p-night-950:#07090B; --gup-p-night-900:#0D1116; --gup-p-night-850:#131920; --gup-p-night-800:#151C24; --gup-p-night-750:#1C242E; --gup-p-night-700:#2A3540; --gup-p-midnight-950:#0A101C; --gup-p-midnight-900:#111A2B; --gup-p-midnight-850:#182338; --gup-p-midnight-800:#162032; --gup-p-midnight-750:#1E2A40; --gup-p-midnight-700:#33425F; /* 暗い面の上の文字（ink 家系の明るい段）。digital と executive で色味が違う。 */ --gup-p-ink-050:#E8EEF4; --gup-p-ink-150:#9FB4C8; --gup-p-ink-250:#74889C; --gup-p-ink-350:#8892A3; --gup-p-ink-055:#E6ECF5; --gup-p-ink-155:#9AA9C0; --gup-p-ink-255:#6B7A93; --gup-p-ink-355:#54637D; /* Gup Orange（Target）。**面積ではなく位置と形で強くする**ので段は 2 つだけ。 500 ＝ ブランドそのもの（暗い面の上・マーカー・破線） 700 ＝ 白地で文字に使える段（#FD5E00 は白地 3.10:1 で本文に使えない） */ --gup-p-orange-500:#FD5E00; --gup-p-orange-700:#C94A00; /* 暗い配色のための MQ・status の段（明度と彩度だけが違う。**色相は 3 テーマ共通**） */ --gup-p-mq-d-p:#5B84FF; --gup-p-mq-d-v:#FF6BD6; --gup-p-mq-d-m:#FF4D4D; --gup-p-mq-d-q:#D5D7D9; --gup-p-mq-d-f:#7ED957; --gup-p-mq-d-g:#FFC947; --gup-p-mq-e-p:#6E9BFF; --gup-p-mq-e-v:#E07AB8; --gup-p-mq-e-m:#E2585C; --gup-p-mq-e-q:#C9CCD0; --gup-p-mq-e-f:#84C46E; --gup-p-mq-e-g:#D9A83C; --gup-p-cg-500:#2DD4D8; --gup-p-cg-450:#4FC3C7; --gup-p-cg-700:#0B7F84; --gup-p-sig-d-action:#7FA8E0; --gup-p-sig-d-pos:#4FC07E; --gup-p-sig-d-neg:#D97B76; --gup-p-sig-d-warn:#C9A26A; --gup-p-sig-d-info:#7AA7D9; --gup-p-sig-e-action:#5E8CE0; --gup-p-sig-e-pos:#4FB980; --gup-p-sig-e-neg:#D9666A; --gup-p-sig-e-warn:#D9A03C; --gup-p-sig-e-info:#7E9CC4; --gup-p-cat-l-blue:#347EFF; --gup-p-cat-l-red:#FE2929; --gup-p-cat-l-green:#32C368; --gup-p-cat-l-orange:#C47132; --gup-p-cat-l-purple:#B162D3; --gup-p-cat-l-teal:#00A7B4; /* 暗い配色の tint（面 × 色相。build-theme-tokens.mjs が生成） */ --gup-p-tint-d-amber050:#2B2823; --gup-p-tint-d-green050:#182D27; --gup-p-tint-d-blue050:#19233B; --gup-p-tint-d-navy050:#19233B; --gup-p-tint-d-red050:#2E2225; --gup-p-tint-d-gold050:#342E1E; --gup-p-tint-d-pink050:#34273B; --gup-p-tint-d-lime050:#1F3120; --gup-p-tint-d-cyan050:#123035; --gup-p-tint-d-green200:#182D27; --gup-p-tint-d-red200:#2E2225; --gup-p-tint-d-blue200:#19233B; --gup-p-tint-d-gold200:#342E1E; --gup-p-tint-d-paper2:#1C1F24; --gup-p-tint-d-paper3:#1C1F24; --gup-p-tint-d-surfacerow:#1C1F24; --gup-p-tint-d-surfacecreamhover:#1C1F24; --gup-p-tint-d-surfacekbd:#1C1F24; --gup-p-tint-d-surfacebox:#1C1F24; --gup-p-tint-d-surfacegridhead:#1C1F24; --gup-p-tint-d-surfacewarm:#1C1F24; --gup-p-tint-d-slidertrack:#1C1F24; --gup-p-tint-d-matrixhothead:#1C1F24; --gup-p-tint-d-matrixhotcell:#1C1F24; --gup-p-tint-d-matrixhothover:#1C1F24; --gup-p-tint-d-helpdot:#1C1F24; --gup-p-tint-e-amber050:#2E3035; --gup-p-tint-e-green050:#1B3538; --gup-p-tint-e-blue050:#1D2B4D; --gup-p-tint-e-navy050:#1D2B4D; --gup-p-tint-e-red050:#312A37; --gup-p-tint-e-gold050:#37362F; --gup-p-tint-e-pink050:#372E4D; --gup-p-tint-e-lime050:#223932; --gup-p-tint-e-cyan050:#153847; --gup-p-tint-e-green200:#1B3538; --gup-p-tint-e-red200:#312A37; --gup-p-tint-e-blue200:#1D2B4D; --gup-p-tint-e-gold200:#37362F; --gup-p-tint-e-paper2:#1F2838; --gup-p-tint-e-paper3:#1F2838; --gup-p-tint-e-surfacerow:#1F2838; --gup-p-tint-e-surfacecreamhover:#1F2838; --gup-p-tint-e-surfacekbd:#1F2838; --gup-p-tint-e-surfacebox:#1F2838; --gup-p-tint-e-surfacegridhead:#1F2838; --gup-p-tint-e-surfacewarm:#1F2838; --gup-p-tint-e-slidertrack:#1F2838; --gup-p-tint-e-matrixhothead:#1F2838; --gup-p-tint-e-matrixhotcell:#1F2838; --gup-p-tint-e-matrixhothover:#1F2838; --gup-p-tint-e-helpdot:#1F2838; /* 暗い配色で読める段（色相はそのまま・明度だけ上げる。生成） */ --gup-p-lit-d-canvasself:#8F96D6; --gup-p-lit-d-gupcolordanger:#E0827B; --gup-p-lit-d-textbluedeep:#789FC5; --gup-p-lit-d-selectaccentdark:#DAB462; --gup-p-lit-d-gupbrandaccent:#DAB862; --gup-p-lit-d-gupcoloraccenthover:#6A9BDC; --gup-p-lit-d-grey:#949BA8; --gup-p-lit-d-textnote:#969DA6; --gup-p-lit-d-actionaccenthover:#6A9BDC; --gup-p-lit-d-textbody:#949CA8; --gup-p-lit-d-textwarm:#DAB862; --gup-p-lit-d-gupactionprimaryhover:#6A9BDC; --gup-p-lit-d-textwarmnote:#DAB862; --gup-p-lit-d-gupcompanyrolevalue:#659BD8; --gup-p-lit-d-gupcompanyrolecustomer:#D88578; --gup-p-lit-d-gupcompanyrolefoundation:#62DA9C; --gup-p-lit-d-urahead:#D7867A; --gup-p-lit-d-pblue:#659BD8; --gup-p-lit-d-gupscenarioforecast:#62B6DA; --gup-p-lit-d-selectaccent:#DAB862; --gup-p-lit-d-qgreen:#79C391; --gup-p-lit-d-uraheaddark:#D7867A; --gup-p-lit-e-canvasself:#969DD9; --gup-p-lit-e-gupcolordanger:#E28A83; --gup-p-lit-e-textbluedeep:#7FA4C8; --gup-p-lit-e-selectaccentdark:#DAB462; --gup-p-lit-e-gupbrandaccent:#DAB862; --gup-p-lit-e-gupcoloraccenthover:#7BA6E0; --gup-p-lit-e-grey:#9AA1AD; --gup-p-lit-e-textnote:#9CA2AB; --gup-p-lit-e-actionaccenthover:#7BA6E0; --gup-p-lit-e-textbody:#9AA2AD; --gup-p-lit-e-textwarm:#DAB862; --gup-p-lit-e-gupactionprimaryhover:#7BA6E0; --gup-p-lit-e-textwarmnote:#DAB862; --gup-p-lit-e-gupcompanyrolevalue:#75A5DC; --gup-p-lit-e-gupcompanyrolecustomer:#DB8C80; --gup-p-lit-e-gupcompanyrolefoundation:#62DA9C; --gup-p-lit-e-urahead:#D98D82; --gup-p-lit-e-pblue:#75A5DC; --gup-p-lit-e-gupscenarioforecast:#62B6DA; --gup-p-lit-e-selectaccent:#DAB862; --gup-p-lit-e-qgreen:#79C391; --gup-p-lit-e-uraheaddark:#D98D82; /* signal を tint の上で読める明るさへ（生成） */ --gup-p-sig2-d-actionprimary:#7FA8E0; --gup-p-sig2-d-positive:#4FC07E; --gup-p-sig2-d-negative:#DC847F; --gup-p-sig2-d-warning:#C9A26A; --gup-p-sig2-d-info:#7AA7D9; --gup-p-sig2-e-actionprimary:#83A5E2; --gup-p-sig2-e-positive:#4FB980; --gup-p-sig2-e-negative:#E38D90; --gup-p-sig2-e-warning:#D9A03C; --gup-p-sig2-e-info:#88A4C9; /* 暗い配色の分類色・買掛（build-theme-tokens.mjs が生成。色相は不変） */ --gup-p-cat-dk-blue:#5182D6; --gup-p-cat-dk-olive:#D6CC51; --gup-p-cat-dk-teal:#51CDD6; --gup-p-cat-dk-pink:#D6518B; --gup-p-cat-dk-green:#51D683; --gup-p-cat-dk-purple:#B35AD8; --gup-p-cat-dk-grass:#61D651; --gup-p-cat-dk-magenta:#D651C4; --gup-p-cat-dk-indigo:#8573DE; --gup-p-cat-dk-orange:#D68B51; --gup-p-cat-dk-moss:#A1D651; --gup-p-cat-dk-red:#D65151; --gup-p-cat-dk-dblue:#6B88BC; --gup-p-cat-dk-dorange:#C68E62; --gup-p-cat-dk-dgrass:#73BE6A; --gup-p-cat-dk-dmagenta:#C068B4; --gup-p-cat-dk-dteal:#71B4B7; --gup-p-cat-dk-dindigo:#8173C9; --gup-p-cat-dk-dolive:#BEB66A; --gup-p-cat-dk-dgreen:#6ABE89; --gup-p-cat-dk-dred:#C26565; --gup-p-cat-dk-dpurple:#A46ABE; --gup-p-cat-dk-dpink:#C3658E; --gup-p-cat-dk-dmoss:#9DC068; --gup-p-wc-pay-dk:#AA73DE; --gup-p-cat-ek-blue:#5A88D8; --gup-p-cat-ek-olive:#D6CC51; --gup-p-cat-ek-teal:#51CDD6; --gup-p-cat-ek-pink:#D85A90; --gup-p-cat-ek-green:#51D683; --gup-p-cat-ek-purple:#B662DA; --gup-p-cat-ek-grass:#61D651; --gup-p-cat-ek-magenta:#D651C4; --gup-p-cat-ek-indigo:#8C7BE0; --gup-p-cat-ek-orange:#D68B51; --gup-p-cat-ek-moss:#A1D651; --gup-p-cat-ek-red:#DA6262; --gup-p-cat-ek-dblue:#6B88BC; --gup-p-cat-ek-dorange:#C68E62; --gup-p-cat-ek-dgrass:#73BE6A; --gup-p-cat-ek-dmagenta:#C068B4; --gup-p-cat-ek-dteal:#71B4B7; --gup-p-cat-ek-dindigo:#877ACC; --gup-p-cat-ek-dolive:#BEB66A; --gup-p-cat-ek-dgreen:#6ABE89; --gup-p-cat-ek-dred:#C56D6D; --gup-p-cat-ek-dpurple:#A871C1; --gup-p-cat-ek-dpink:#C3658E; --gup-p-cat-ek-dmoss:#9DC068; --gup-p-wc-pay-ek:#A377DA; /* --- GUP-HOME-PROD1 Gate A：ここまで生成 --- */ /* --- surface（面の階層は neutral で作る。色付きカードを重ねない） ---------- */ --gup-surface-app:var(--gup-p-paper-canvas); --gup-surface-primary:var(--gup-p-paper-content); --gup-surface-secondary:var(--gup-p-paper-2); --gup-surface-muted:var(--gup-p-paper-sunken); /* ★readonly は paper-2 のまま。暗い 2 配色は themes.css でこの役割を上書きしていないので、 ここを動かすと Digital / Executive の computed 値まで変わる（今回は Air だけを変える）。 */ --gup-surface-readonly:var(--gup-p-paper-2); --gup-surface-selected:var(--gup-p-gold-050); /* ④ 前面（dialog）。**床（app）と同じ役割で塗らない**のが今回の要点。 値は情報面と同じでよい（Founder 決定：新しい色を増やさずに成立するなら Content 相当でよい）。 「前面」と「床」が別の役割であることが守るべき contract。 */ --gup-surface-overlay:var(--gup-p-paper-content); /* --- text ---------------------------------------------------------------- */ --gup-text-primary:var(--gup-p-ink-900); --gup-text-secondary:var(--gup-p-ink-500); /* UI-TYPE3（Founder 判断）：文字色は 3 段だけ。 濃い黒（--gup-text-primary）… 項目名・入力した内容・見出し グレー（--gup-text-secondary）… 補足・単位・ヒント リンク（--gup-action-primary）… 押せるもの ★muted は secondary とほぼ同じグレー（5.4:1 と 6.1:1）が 2 本並んでいただけなので、 secondary へ寄せた（実測：muted 87 件が 18 画面に出ていた）。 ★disabled は「押せない」という別の意味なので、ink-400 のまま残す。 */ --gup-text-muted:var(--gup-text-secondary); /* ★「塗りの上に置くインク」。**アプリの逆色ではない。** 濃い面（ヘッダー帯・badge・MQ の濃いセル）の上に乗る文字なので、 配色（テーマ）が変わっても白のまま。ここをテーマで反転させると、 濃紺の帯の上の文字が暗いテーマで消える。 */ --gup-text-inverse:var(--gup-p-white); --gup-text-disabled:var(--gup-p-ink-400); /* ★「濃い面」。--navy（＝文字の色）と同じ値だが役割が違う。 ヘッダー帯・ライセンス画面・badge の地に使う。 配色が変わっても濃いままにするので、--gup-text-inverse と対で使える。 GUP-HOME-PROD1 Gate A：1 名 2 役だった --navy から背景の 18 か所を分離した。 */ --gup-surface-inverse:var(--gup-p-ink-900); /* --- border --------------------------------------------------------------- */ --gup-border-default:var(--gup-p-ink-110); --gup-border-strong:var(--gup-p-ink-320); --gup-border-selected:var(--gup-p-gold-400); /* 左端のマーカー。細い線なので最も鮮やかな段を使う */ --gup-border-focus:var(--gup-p-navy-600); /* --- action（主要操作と選択状態を混同しない） ------------------------------ 主要操作＝濃紺の面。選択中＝薄いゴールド面＋左のマーカー。focus＝高視認の輪郭。 */ --gup-action-primary:var(--gup-p-navy-600); --gup-action-primary-hover:var(--gup-p-navy-700); --gup-action-secondary:var(--gup-p-white); --gup-action-disabled:var(--gup-p-ink-300); --gup-focus-ring:var(--gup-p-navy-600); /* --- state（意味をアプリ全体で固定する） ----------------------------------- 情報＝青 ／ 成功＝緑 ／ 注意＝橙 ／ エラー・破壊的操作＝赤（danger） 業績の悪化（negative）は danger と**別 token**。削除の赤と業績の赤を共用しない。 */ --gup-info:var(--gup-p-blue-600); --gup-info-soft:var(--gup-p-blue-050); --gup-success:var(--gup-p-green-600); --gup-success-soft:var(--gup-p-green-050); --gup-warning:var(--gup-p-amber-700); --gup-warning-soft:var(--gup-p-amber-050); --gup-danger:var(--gup-p-red-700); --gup-danger-soft:var(--gup-p-red-050); --gup-positive:var(--gup-p-green-600); /* 業績の好転。符号ではなく判定に使う */ --gup-negative:var(--gup-p-red-600); /* 業績の悪化。符号ではなく判定に使う */ /* --- scenario（Current / Plan / Actual / Budget / Forecast / 着地見込） ----- Actual と Current は基準なので neutral。Plan と Budget は同じゴールド系。 Forecast は青系で Plan と明確に分ける。着地見込は紫系で Forecast と分ける。 ★色だけで区別しない。必ずラベル（と、線なら線種）を併せて出す。 */ --gup-scenario-current:var(--gup-p-ink-500); --gup-scenario-actual:var(--gup-p-ink-900); --gup-scenario-plan:var(--gup-p-gold-550); --gup-scenario-budget:var(--gup-p-gold-500); --gup-scenario-forecast:var(--gup-p-blue-500); --gup-scenario-latest-estimate:var(--gup-p-violet-600); --gup-scenario-current-soft:var(--gup-p-paper-2); --gup-scenario-actual-soft:var(--gup-p-paper-2); --gup-scenario-plan-soft:var(--gup-p-gold-050); --gup-scenario-budget-soft:var(--gup-p-gold-050); --gup-scenario-forecast-soft:var(--gup-p-cyan-050); --gup-scenario-latest-estimate-soft:var(--gup-p-violet-050); /* --- 互換 alias（既存 class が参照している名前。値は上の semantic が正） ---- 新しい実装では上の semantic 名を使う。ここは置き換え途中の橋渡し。 */ --gup-color-bg:var(--gup-surface-app); --gup-color-surface:var(--gup-surface-primary); --gup-color-surface-subtle:var(--gup-surface-muted); --gup-color-text-primary:var(--gup-text-primary); --gup-color-text-secondary:var(--gup-text-secondary); --gup-color-text-disabled:var(--gup-text-disabled); --gup-color-text-on-accent:var(--gup-text-inverse); --gup-color-border:var(--gup-border-default); --gup-color-border-strong:var(--gup-border-strong); --gup-color-accent:var(--gup-action-primary); --gup-color-accent-hover:var(--gup-action-primary-hover); --gup-color-accent-subtle:var(--gup-p-navy-050); --gup-color-positive:var(--gup-positive); --gup-color-positive-subtle:var(--gup-success-soft); --gup-color-negative:var(--gup-negative); --gup-color-negative-subtle:var(--gup-p-red-050); /* 会社盤の 3 領域（UI-COMPANY-BOARD-COLOR1）。 ★色の正本は **固定 slot**（mfg / sales / hq）であって、表示名の文字列ではない。 名称は会社ごとに自由に書き換えられるので、文字列 match で色を決めてはいけない。 ★戦略費の 4 色（広告/研究開発/教育/IT）とは別概念。会社盤は「組織の役割」の識別色なので、 面はさらに薄く、彩度も抑える（同じ画面に並んでも意味を取り違えないように）。 ★赤は danger（--gup-p-red-700 破壊的操作）でも negative（--gup-p-red-600 業績悪化）でもなく、 「顧客をつくる側」の識別色。面は白に近い薄さに保ち、error 表示に見せない。 */ --gup-company-role-value:var(--gup-p-blue-600); /* 価値をつくる側 */ --gup-company-role-value-bg:var(--gup-p-blue-050); --gup-company-role-value-border:var(--gup-p-blue-200); --gup-company-role-customer:var(--gup-p-red-600); /* 顧客をつくる側 */ --gup-company-role-customer-bg:var(--gup-p-red-050); --gup-company-role-customer-border:var(--gup-p-red-200); --gup-company-role-foundation:var(--gup-p-green-600); /* 会社を支える側 */ --gup-company-role-foundation-bg:var(--gup-p-green-050); --gup-company-role-foundation-border:var(--gup-p-green-200); /* FMGマトリクスの背景。**G（＝M−F）そのものの目盛**であって、面の階層でも状態色でもない。 ★Founder 指示：G がプラスへ大きいほど青／マイナスへ大きいほど赤／G＝0 でほぼ白。 positive（--gup-positive 緑）を使わないのは、緑は「業績が好転した」という **変化の判定**の色で、ここで示したいのは変化ではなく **水準（いまいくら稼げているか）**だから。 ★点・線・ラベルが主役なので、面は淡くしか出さない（濃度は ui/fmg.js が G から決める）。 */ --gup-fmg-gain:var(--gup-p-blue-600); /* G がプラス側 */ --gup-fmg-loss:var(--gup-p-red-600); /* G がマイナス側 */ /* 決算書ナビの貸借対照表の 3 区分（資産 / 負債 / 純資産）。 ★これは **どの区分の残高か**を示す識別色で、良し悪し（positive / negative）でも 操作の重さ（danger）でもない。だから数字はどの区分も同じ黒・同じ大きさ。 ★純資産に緑を使うが、--gup-positive（業績の好転）とは役割が違うので別名で持つ （tokens.css の「見た目が同じでも役割が違えば分ける」に従う）。 ★面積が大きい積み上げ図で使うので、濃い識別色ではなく白に近い段を使う。 */ --gup-fn-asset:var(--gup-p-blue-050); --gup-fn-liability:var(--gup-p-pink-050); --gup-fn-equity:var(--gup-p-green-050); /* Financial diagram fills stay readable on all three surfaces. No new palette. */ --gup-fn-asset-fill:color-mix(in srgb,var(--gup-p-blue-500) 22%,var(--gup-p-ink-050)); --gup-fn-cash-fill:color-mix(in srgb,var(--gup-p-blue-500) 52%,var(--gup-p-ink-050)); --gup-fn-liability-fill:color-mix(in srgb,var(--gup-p-cat-pink) 10%,var(--gup-p-ink-050)); --gup-fn-debt-border:var(--gup-p-cat-pink); --gup-fn-equity-fill:color-mix(in srgb,var(--ui-f) 20%,var(--gup-p-ink-050)); --gup-fn-wc:color-mix(in srgb,var(--gup-cg) 65%,var(--ui-f)); --gup-fn-wc-border:var(--gup-p-teal-600); --gup-fn-g:color-mix(in srgb,var(--gup-p-orange-500) 75%,var(--gup-p-ink-050)); --gup-fn-line:color-mix(in srgb,var(--gup-color-text-primary) 80%,transparent); --gup-trend-cash:color-mix(in srgb,var(--gup-fn-cash-fill) 75%,var(--gup-color-text-primary)); --gup-trend-debt:color-mix(in srgb,var(--gup-fn-debt-border) 70%,var(--gup-color-text-primary)); /* MQ会計の 5 つの箱（PQ・VQ・MQ・F・G）を KPI カードでも同じ色で示すための面。 ★箱そのもの（--mg-*）は濃い識別色。カードは面積が大きいので、同じ色相の白に近い段だけを使う。 ★色は「どの箱の数字か」を示すだけで、良し悪し（positive / negative）ではない。 だから数字は 5 枚とも同じ大きさ・同じ黒。 */ --gup-mg-pq-bg:var(--gup-p-blue-050); --gup-mg-vq-bg:var(--gup-p-pink-050); --gup-mg-mq-bg:var(--gup-p-red-050); --gup-mg-f-bg:var(--gup-p-green-050); --gup-mg-g-bg:var(--gup-p-amber-050); /* 5 枚の結論カードは MQ会計の箱と同じ色相（G＝山吹） */ --gup-color-warning:var(--gup-warning); --gup-color-warning-subtle:var(--gup-warning-soft); --gup-color-info:var(--gup-info); --gup-color-info-subtle:var(--gup-info-soft); --gup-color-danger:var(--gup-danger); --gup-color-danger-subtle:var(--gup-danger-soft); --gup-color-focus:var(--gup-focus-ring); --gup-color-overlay:rgba(23,32,42,.55); /* 例外：合成用の半透明。palette 化しない */ /* --- z-index（5 段階） ----------------------------------------------------- */ --gup-z-base:0; --gup-z-sticky:100; --gup-z-dropdown:200; --gup-z-overlay:300; --gup-z-modal:400; --gup-z-toast:500; /* ========================================================================== 画面固有・図表固有の色（UI-COLOR1 で base.css から移設） 値は上の semantic を指すか、docs/UI_COLOR1_SYSTEM.md §16 の例外に該当する固定値。 ここが色の唯一の正本。新しい色はまず semantic に当てはまらないか確認する。 ========================================================================== */ --navy:var(--gup-brand-ink); --grey:var(--gup-p-ink-300); --paper:var(--gup-surface-app); --card:var(--gup-surface-primary); --line:var(--gup-border-default); --slider-track:#E3E0D6; --slider-zero-mark:#9AA0A8; --p-blue:#2E6DB4; --v-amber:#C97A2B; --q-green:#398050; /* 元#3F8B5Cは白背景4.15:1でWCAG AA未達のため調整（4.80:1） */ --f-violet:#6B5B95; --company-teal:var(--gup-p-teal-600); --bad:var(--gup-negative); --good:var(--gup-positive); /* 元#3F8B5Cは白背景4.15:1でWCAG AA未達のため調整（4.80:1） */ --white:var(--gup-surface-primary); --warn:var(--gup-warning); --black:#000000; /* MQ会計図の枠線。**明るい配色では黒のまま**（Air は 1px も変わらない）。 暗い配色（Digital／Executive）では地と同じ黒になって枠が消えるので、 themes.css が明るい側へ差し替える。component に if (theme) を書かないため。 */ --bd-frame:var(--black); --text-main:var(--gup-text-primary); /* UI-TYPE3：ラベル・列見出しは「読む文字」なので濃い黒。 ink-600（7.9:1）は黒とグレーの中間で、3 段のどれでもなかった（実測 73 件・14 画面）。 */ --text-label:var(--gup-text-primary); --text-secondary:var(--gup-text-secondary); --text-muted:var(--gup-text-muted); /* 元#8A92A0は白背景コントラスト比3.13:1でWCAG AA未達だったため調整（4.78:1） */ --surface-soft:var(--gup-surface-secondary); --surface-muted:var(--gup-surface-muted); --surface-row:#F6F3EB; /* GUP-AIR-SURFACE1：情報面から同じ距離 */ --surface-kpi:var(--gup-surface-secondary); --surface-warn:var(--gup-warning-soft); --surface-warn-line:var(--gup-p-gold-200); --line-soft:var(--gup-p-paper-2); --bar-accent:#2A333D; --bar-accent-2:#38424D; --bar-accent-3:#5B6672; --canvas-self:#3A44A0; --select-accent:var(--gup-brand-accent); --select-accent-dark:var(--gup-p-gold-700); --select-accent-border:var(--gup-border-selected); /* GUP-COLOR-FIX1（CLR-04）：選択中の金の面に載るインク。 ★塗りだけ theme で差し替えるとチェックが消える（--mg-on-* と同じ教訓）。必ず対で決める。 */ --select-accent-ink:var(--gup-on-fill); --action-accent:var(--gup-action-primary); --action-accent-hover:var(--gup-action-primary-hover); --chart-border:var(--gup-border-default); --chart-grid:#E3E1D6; /* GUP-AIR-SURFACE1 */ --chart-grid-soft:#EAE7DD; /* GUP-AIR-SURFACE1 */ --chart-axis:#CFD3D8; --opqr-o:var(--navy); --opqr-p:var(--p-blue); --opqr-q:var(--q-green); --opqr-r:var(--bad); --vote-effect:#2E6DB4; --vote-feasible:#398050; /* 元#3F8B5Cは白背景4.15:1でWCAG AA未達のため調整（4.80:1） */ --vote-excite:#C97A2B; /* 戦略キャンバスの線と凡例（UI-CANVAS-COLOR1・Founder 指摘）。 以前は 自社 #3A44A0（S47%）／競合 #6B5B95（S24%）・#227483（S59%）… と どれも濁っていて、凡例を見ても線を追えなかった。彩度を上げ、色相を離す。 ★--canvas-self は画面全体のアクセント（タブ・枠・badge）でもあるので触らない。 グラフの 自社 線は専用の --series-self を持つ。 並びは「競合が 2 つのとき最も離れる」順（赤 → 緑 → 橙 → 紫 → 青緑）。 */ --series-self:var(--gup-p-cat-blue); --series-1:var(--gup-p-cat-red); --series-2:var(--gup-p-cat-green); --series-3:var(--gup-p-cat-orange); --series-4:var(--gup-p-cat-purple); --series-5:var(--gup-p-cat-teal); /* OPQR-MU-PRODUCT1：OPQR の「管理単位 × 商品」で、点の色が管理単位を表す。 ★戦略キャンバスの --series-* とは役割が違うので別名で持つ（見た目が同じでも役割が違えば分ける）。 とくに --series-self は「自社の線」という意味を既に持っているので、管理単位へ流用しない。 ★識別のためだけの色。業績の良し悪し（positive / negative）も操作の重さ（danger）も意味しない。 O/P/Q/R の 4 象限は背景の色分けと隅の大文字が示す（点の色は単位）。 ★同じグラフに出る管理単位どうしが同じ色になってはいけない （同じ商品名の点が 2 つ並んだとき、色でしか区別できないため）。 ★並びは「先に使う色ほど見分けやすい」順。 ただし **色相の距離ではなく、色覚特性まで含めた見分けやすさ**で決めている。 色相だけで並べると、たとえば orange と grass は 1 型色覚でほぼ同じ色になる。 Viénot–Brettel–Mollon(1999) の近似で 4 型（正常・1 型・2 型・3 型）を作り、 CIE76 ΔE の最悪値を先頭から順に最大化した（実測は gate/opqr-mu-product1/cvd.mjs）。 先頭 n 色の最小 ΔE … n=2:121 / n=3:22.1 / n=4:15.5 / n=5:10.5 / n=6:9.8 / n=8:4.9 見本 32 社の営業単位は 2〜3 なので、その帯がいちばん効く。 ★1〜12 が鮮やかな段、13〜24 が同じ色相の濃く落ち着いた段。 ⚠ 12 色相を使い切ると、色覚特性によっては色だけで見分けられない組がどうしても出る （n=10 で ΔE 1.7）。単位が多い会社では凡例と hover が手がかりになる。 */ --gup-mu-series-1:var(--gup-p-cat-blue); /* 218deg */ --gup-mu-series-2:var(--gup-p-cat-olive); /* 55deg */ --gup-mu-series-3:var(--gup-p-cat-teal); /* 184deg */ --gup-mu-series-4:var(--gup-p-cat-pink); /* 334deg */ --gup-mu-series-5:var(--gup-p-cat-green); /* 142deg */ --gup-mu-series-6:var(--gup-p-cat-purple); /* 282deg */ --gup-mu-series-7:var(--gup-p-cat-grass); /* 113deg */ --gup-mu-series-8:var(--gup-p-cat-magenta); /* 308deg */ --gup-mu-series-9:var(--gup-p-cat-indigo); /* 250deg */ --gup-mu-series-10:var(--gup-p-cat-orange); /* 26deg */ --gup-mu-series-11:var(--gup-p-cat-moss); /* 84deg */ --gup-mu-series-12:var(--gup-p-cat-red); /* 0deg */ --gup-mu-series-13:var(--gup-p-cat-d-blue); --gup-mu-series-14:var(--gup-p-cat-d-orange); --gup-mu-series-15:var(--gup-p-cat-d-grass); --gup-mu-series-16:var(--gup-p-cat-d-magenta); --gup-mu-series-17:var(--gup-p-cat-d-teal); --gup-mu-series-18:var(--gup-p-cat-d-indigo); --gup-mu-series-19:var(--gup-p-cat-d-olive); --gup-mu-series-20:var(--gup-p-cat-d-green); --gup-mu-series-21:var(--gup-p-cat-d-red); --gup-mu-series-22:var(--gup-p-cat-d-purple); --gup-mu-series-23:var(--gup-p-cat-d-pink); --gup-mu-series-24:var(--gup-p-cat-d-moss); --outcome-positive:var(--gup-info); --outcome-negative:var(--gup-negative); --header-text:#EDEFF1; --header-panel:#101923; --header-control:#1C252F; --header-control-hover:#27313C; --header-hover:#0E151C; --header-line:#2A333D; --header-panel-line:#2C3743; --header-border:#38424D; --header-border-soft:#465260; --header-focus:#5A86B8; --header-muted:#9FB4C8; --header-control-text:#CFD5DB; --header-warn:#FFC98B; --header-error:#FF8A80; --header-gold:#FFD97A; --header-loss:#FF9C8C; --surface-cream:var(--gup-surface-app); --surface-cream-hover:#E6E4DB; /* GUP-AIR-SURFACE1 */ /* GUP-AIR-SURFACE1B：枠線の役割そのものを指す。 生 hex のままだと 3 配色で同じ値になり、暗い配色でだけ 14.3:1 の明るい枠が浮いていた （themes.css がこの token を上書きしていないため）。border-default を指せば Air では面と対で下がり、暗い 2 配色では各配色の枠線とそろう。 */ --surface-cream-line:var(--gup-border-default); --surface-kbd:#E6E4DD; /* GUP-AIR-SURFACE1 */ --surface-warm:#E7E7DA; /* GUP-AIR-SURFACE1 */ --surface-grid-head:#E2E8EB; /* GUP-AIR-SURFACE1 */ --surface-box:#E7E3DA; /* GUP-AIR-SURFACE1 */ --matrix-hot-head:#D8E6F4; --matrix-hot-cell:#F4F9FD; --matrix-hot-hover:#E5F0FA; --panel-blue-bg:var(--gup-info-soft); --panel-blue-line:var(--gup-p-navy-050); --panel-green-bg:var(--gup-success-soft); --panel-green-line:var(--gup-p-green-050); --panel-lime-bg:#F2F5DE; --panel-lime-line:#DDE3B8; --panel-teal-bg:#E3F3F1; --panel-teal-line:#C5E4E0; --panel-red-bg:var(--gup-danger-soft); --panel-red-line:var(--gup-p-red-050); --panel-positive-bg:var(--gup-success-soft); --panel-positive-line:var(--gup-p-green-050); --panel-negative-bg:var(--gup-danger-soft); --panel-negative-line:var(--gup-p-red-050); --text-body:var(--gup-p-ink-700); --text-note:var(--gup-p-ink-500); /* 元#7A828Cは白背景3.89:1でWCAG AA未達のため調整（4.67:1）。さらにフッター背景#F7F6F1では4.31:1しか出ないため再調整（5.30:1） */ --text-disabled:var(--gup-text-disabled); /* 元#AAB4BDは白背景2.11:1でWCAG AA未達のため調整（4.72:1） */ --text-soft:var(--gup-text-secondary); /* 元#9AA0A8は白背景2.64:1でWCAG AA未達のため調整（5.00:1）。さらに戦略チップの薄い背景色上では4.4:1前後しか出ないため再調整（5.5:1以上） */ --text-warm:var(--gup-p-gold-600); --text-warm-dark:var(--gup-negative); --text-warm-note:var(--gup-p-gold-600); --text-warm-muted:var(--gup-negative); /* 元#B08070は白背景3.40:1でWCAG AA未達のため調整（5.05:1） */ --text-link-hover:var(--gup-action-primary-hover); --text-success:var(--gup-positive); --text-caution:var(--gup-warning); /* 元#A5741Fは白背景4.10:1でWCAG AA未達のため微調整（4.84:1） */ --text-blue-deep:#2C4A66; --text-blue-muted:#57728C; /* 元#5F7A94は白背景4.47:1でわずかにWCAG AA未達のため微調整（5.01:1） */ /* UI-TYPE3：矢印は「→」だけの区切り記号なので、補足と同じグレー。 独自の暖色グレー（#7A756A）を 4 本目の中立色として持たない。 */ --text-arrow:var(--gup-text-secondary); --icon-muted:var(--gup-text-muted); /* 元#9199A1は白背景2.89:1でWCAG AA未達のため調整（5.40:1） */ --overlay-bg:#5A6472; --overlay-line:#7E8A98; /* GUP-HOME-PREP1 Gate C：旧値（薄いグレー）の上の白文字は 1.61:1 で「?」が読めなかった。 palette の 300 段（境界用・白地 3.1:1）へ寄せ、文字は本文色にする（下の components.css）。 ink-300 上の本文色は 5.2:1、丸そのものも白地 3.1:1 で輪郭が見える。 ★丸をこれ以上濃くすると 22px の塗り丸が主要操作に見えるので、 濃くするのは面ではなく文字。palette 経由にしたので生 hex も 1 つ減る。 */ --help-dot:var(--gup-p-ink-300); --print-muted:#555555; --print-note:#666666; --print-line:#CCCCCC; --print-line-soft:#DDDDDD; --chip-token-border:#B9BECA; --strategy-self-line:#9FC0E6; --strategy-a-line:#E6C79F; --strategy-b-line:#9FD6B3; --ura-head:#5C241C; --ura-head-dark:#451B15; /* GUP-COLOR-FIX1（CLR-06）：両得20 の見出し・件数の面に載るインク。 ★--ura-head は theme で明るい側へ差し替わるのに、インクが白のままで 2.48〜2.77:1 だった。 */ --ura-head-ink:var(--gup-text-inverse); --ura-soft-text:#D8C2BC; --chip-red:#C24A3F; --chip-blue:#2E6DB4; --chip-yellow:#D9A62E; --chip-green:#398050; /* 元#3F8B5Cは白背景4.15:1でWCAG AA未達のため調整（4.80:1） */ --mg-p:#000099; /* P・PQ＝紺（白文字） */ --mg-v:#FF99FF; /* V・VQ＝ピンク（濃紺文字） */ --mg-m:#E60000; /* M・MQ＝赤（白文字）。元#FF0000は白文字コントラスト比4.00:1でWCAG AA未達のため調整（4.81:1） */ --mg-q:#FFFFFF; /* Q＝白・黒枠（無彩色） */ --mg-f:#92D050; /* F＝黄緑（濃紺文字） */ --mg-g:#FFC000; /* G＝山吹（濃紺文字 10.02:1）。MQ会計の箱・ヘッダーの点。 ★一度 favicon のオレンジ（#FD5E00）にしたが、**隣の MQ（赤 #E60000）と近く**なって 箱が読みにくくなったため Founder 判断で戻した。箱の中では 赤 と 山吹 の差が要る。 グラフの柱だけは白地の上に置くので、別の色（--chart-g）を使う。 */ /* ⑤ 予実管理 の G の柱。 ★GUP-HOME-PROD1 Gate A で **Gold へ戻した。** もとは favicon のオレンジ（#FD5E00）だった。白地で山吹が 1.64:1 で沈むのを避けるためで、 当時は正しい判断だったが、Founder 決定で **#FD5E00 は Target（目標）専用**になった。 G の柱がオレンジのままだと、同じグラフの中で「利益」と「目標」が同じ色になる （Executive では色覚特性下の ΔE 0.5 ＝ ほぼ同色）。 ★白地で沈まない Gold は既に --ui-g（ダークアンバー #B8860B・4.4:1）が持っている。 新しい色を作らず、G の UI 調整色をそのまま使う。 */ --chart-g:var(--ui-g); --ui-p:#3A44A0; /* 紺→インディゴ */ /* ★GUP-HOME-PROD1 Gate A：#B45FB4 は白文字で 4.01:1 と AA 未達だった（V タグ）。 色相 300°（Pink）はそのままで、白文字が 4.5:1 を満たす最小の暗さへ落とす。 */ --ui-v:#AE53AE; /* ピンク→マゼンタ */ --ui-q:#5B6672; /* 白→スレート */ --ui-m:#B7402F; /* 赤→ブリックレッド（MQ単体の色。Gup検証のMQ変化バー等） */ --ui-f:#4D7527; /* 黄緑→深緑。元#5E9732は背景#FCFBF8で3.41:1のみでWCAG AA未達のため調整（5.22:1） */ --ui-g:#B8860B; /* 山吹→ダークアンバー */ /* GUP-COLOR-FIX1（CLR-09 / CLR-10）：G の **文字と目盛り** の段。 --ui-g（#B8860B）は白地で 3.25:1 しかなく、12〜13px の文字には足りない。 ★「G はこの色」という意味は保つ（同じ金の家系の濃い段）。塗り・線・凡例の印は --ui-g のまま。 ★暗い配色では塗りと同じ明るい段でよいので、themes.css が指し直す。 */ --ui-g-text:var(--gup-p-gold-700); /* 運転資本の箱の 買掛金。塗りの上のインクは --gup-on-fill が対で持つ。 */ --ui-wc-pay:var(--gup-p-wc-pay-600); /* 変数色のベタ塗りに載せるインク。light は塗りが暗いので白、dark 系は塗りが明るいので黒。 ★塗りだけ差し替えると文字が消える（GUP-HOME-PROD1 Gate A）。必ず対で決める。 */ --gup-on-fill:var(--gup-text-inverse); /* GUP-COLOR-FIX1（CLR-08）：入力例（placeholder）。browser の既定グレーに任せない。 ★実際に入った値（--gup-text-primary）より弱く、かつ通常文字の基準を満たす段。 */ --gup-text-placeholder:var(--gup-text-secondary); /* GUP-COLOR-FIX1（CLR-07）：補足・未確認・尺度の文字。 ★「重要度が低い」は「操作できない」ではない。disabled（--gup-text-disabled）と分ける。 */ --gup-text-supplementary:var(--gup-text-secondary); /* ★白＝触れる場所。情報面を純白から外したので、入力面は **明示的に白へ留める**。 既定のままだと --gup-surface-primary に付いてきて「読む面」と同じ色になる。 暗い 2 配色は themes.css がこの 2 つを上書きして、いままでの値のままにする。 */ --input-bg:var(--gup-p-white); --input-bg-focus:var(--gup-p-white); --input-border:var(--gup-border-default); --input-border-focus:var(--gup-focus-ring); } /* ========================================================================== UI-COLOR1: 画面固有・図表固有の色 token（base.css から移設） すべて上の semantic を指すか、下の「例外」に該当する固定値。 ここが色の唯一の正本。新しい色はまず semantic に当てはまらないか確認する。 ========================================================================== */ /* ===== Gup 配色（テーマ）— GUP-HOME-PROD1 Gate A ========================== 正本 gate/home-prod1/COLOR_CHANNEL_CONTRACT.md ／ 反映先 docs/DESIGN.md（Gate D） ★このファイルは **hex を 1 つも持たない。** palette（tokens.css）を指し直すだけ。 生の色の正本は tokens.css だけ、という契約を壊さないため。 ★:root ＝ Air。**いまの production の値そのもの**なので、ここに air のブロックは無い。 Air を選んだ人の画面は今までと 1 px も変わらない。 ★役割（semantic token の名前）は 3 テーマ共通。**値だけ**が違う（指示 §11・§35）。 component の中に if (theme === 'digital') を書かない。 ★このファイルは gate/home-prod1/build-theme-tokens.mjs が生成する。**手で編集しない。** ========================================================================= */ [data-gup-theme="digital"]{ --gup-surface-app:var(--gup-p-night-950); --gup-surface-primary:var(--gup-p-night-900); --gup-surface-secondary:var(--gup-p-night-850); --gup-surface-muted:var(--gup-p-night-850); --gup-surface-overlay:var(--gup-p-night-950); --input-bg:var(--gup-p-night-900); --input-bg-focus:var(--gup-p-night-900); --gup-text-primary:var(--gup-p-ink-050); --gup-text-secondary:var(--gup-p-ink-150); --gup-text-disabled:var(--gup-p-ink-350); --gup-border-default:var(--gup-p-night-750); --gup-border-strong:var(--gup-p-night-700); --gup-brand-ink:var(--gup-p-ink-050); --chart-grid:var(--gup-p-night-800); --chart-grid-soft:var(--gup-p-night-850); --chart-axis:var(--gup-p-night-700); --ui-p:var(--gup-p-mq-d-p); --ui-v:var(--gup-p-mq-d-v); --ui-m:var(--gup-p-mq-d-m); --ui-q:var(--gup-p-mq-d-q); --ui-f:var(--gup-p-mq-d-f); --ui-g:var(--gup-p-mq-d-g); --mg-p:var(--gup-p-mq-d-p); --mg-v:var(--gup-p-mq-d-v); --mg-m:var(--gup-p-mq-d-m); --mg-q:var(--gup-p-mq-d-q); --mg-f:var(--gup-p-mq-d-f); --mg-g:var(--gup-p-mq-d-g); --mg-on-p:var(--gup-p-ink-900); --mg-on-v:var(--gup-p-ink-900); --mg-on-m:var(--gup-p-ink-900); --mg-on-q:var(--gup-p-ink-900); --mg-on-f:var(--gup-p-ink-900); --mg-on-g:var(--gup-p-ink-900); --ui-on-fill:var(--gup-p-ink-900); --bd-frame:var(--gup-p-ink-050); --series-self:var(--gup-p-cat-l-blue); --series-1:var(--gup-p-cat-l-red); --series-2:var(--gup-p-cat-l-green); --series-3:var(--gup-p-cat-l-orange); --series-4:var(--gup-p-cat-l-purple); --series-5:var(--gup-p-cat-l-teal); --gup-target:var(--gup-p-orange-500); --gup-cg:var(--gup-p-cg-500); --ui-wc-pay:var(--gup-p-wc-pay-dk); --gup-on-fill:var(--gup-p-ink-900); --gup-action-primary:var(--gup-p-sig2-d-actionprimary); --gup-positive:var(--gup-p-sig2-d-positive); --gup-negative:var(--gup-p-sig2-d-negative); --gup-warning:var(--gup-p-sig2-d-warning); --gup-info:var(--gup-p-sig2-d-info); --gup-p-amber-050:var(--gup-p-tint-d-amber050); --gup-p-green-050:var(--gup-p-tint-d-green050); --gup-p-blue-050:var(--gup-p-tint-d-blue050); --gup-p-navy-050:var(--gup-p-tint-d-navy050); --gup-p-red-050:var(--gup-p-tint-d-red050); --gup-p-gold-050:var(--gup-p-tint-d-gold050); --gup-p-pink-050:var(--gup-p-tint-d-pink050); --gup-p-lime-050:var(--gup-p-tint-d-lime050); --gup-p-cyan-050:var(--gup-p-tint-d-cyan050); --gup-p-green-200:var(--gup-p-tint-d-green200); --gup-p-red-200:var(--gup-p-tint-d-red200); --gup-p-blue-200:var(--gup-p-tint-d-blue200); --gup-p-gold-200:var(--gup-p-tint-d-gold200); --gup-p-paper-2:var(--gup-p-tint-d-paper2); --gup-p-paper-3:var(--gup-p-tint-d-paper3); --surface-row:var(--gup-p-tint-d-surfacerow); --surface-cream-hover:var(--gup-p-tint-d-surfacecreamhover); --surface-kbd:var(--gup-p-tint-d-surfacekbd); --surface-box:var(--gup-p-tint-d-surfacebox); --surface-grid-head:var(--gup-p-tint-d-surfacegridhead); --surface-warm:var(--gup-p-tint-d-surfacewarm); --slider-track:var(--gup-p-tint-d-slidertrack); --matrix-hot-head:var(--gup-p-tint-d-matrixhothead); --matrix-hot-cell:var(--gup-p-tint-d-matrixhotcell); --matrix-hot-hover:var(--gup-p-tint-d-matrixhothover); --help-dot:var(--gup-p-tint-d-helpdot); --gup-color-text-on-accent:var(--gup-p-ink-900); --canvas-self:var(--gup-p-lit-d-canvasself); --gup-color-danger:var(--gup-p-lit-d-gupcolordanger); --text-blue-deep:var(--gup-p-lit-d-textbluedeep); --select-accent-dark:var(--gup-p-lit-d-selectaccentdark); --gup-brand-accent:var(--gup-p-lit-d-gupbrandaccent); --gup-color-accent-hover:var(--gup-p-lit-d-gupcoloraccenthover); --grey:var(--gup-p-lit-d-grey); --text-note:var(--gup-p-lit-d-textnote); --action-accent-hover:var(--gup-p-lit-d-actionaccenthover); --text-body:var(--gup-p-lit-d-textbody); --text-warm:var(--gup-p-lit-d-textwarm); --gup-action-primary-hover:var(--gup-p-lit-d-gupactionprimaryhover); --text-warm-note:var(--gup-p-lit-d-textwarmnote); --gup-company-role-value:var(--gup-p-lit-d-gupcompanyrolevalue); --gup-company-role-customer:var(--gup-p-lit-d-gupcompanyrolecustomer); --gup-company-role-foundation:var(--gup-p-lit-d-gupcompanyrolefoundation); --ura-head:var(--gup-p-lit-d-urahead); --p-blue:var(--gup-p-lit-d-pblue); --gup-scenario-forecast:var(--gup-p-lit-d-gupscenarioforecast); --select-accent:var(--gup-p-lit-d-selectaccent); --q-green:var(--gup-p-lit-d-qgreen); --ura-head-dark:var(--gup-p-lit-d-uraheaddark); --gup-mu-series-1:var(--gup-p-cat-dk-blue); --gup-mu-series-2:var(--gup-p-cat-dk-olive); --gup-mu-series-3:var(--gup-p-cat-dk-teal); --gup-mu-series-4:var(--gup-p-cat-dk-pink); --gup-mu-series-5:var(--gup-p-cat-dk-green); --gup-mu-series-6:var(--gup-p-cat-dk-purple); --gup-mu-series-7:var(--gup-p-cat-dk-grass); --gup-mu-series-8:var(--gup-p-cat-dk-magenta); --gup-mu-series-9:var(--gup-p-cat-dk-indigo); --gup-mu-series-10:var(--gup-p-cat-dk-orange); --gup-mu-series-11:var(--gup-p-cat-dk-moss); --gup-mu-series-12:var(--gup-p-cat-dk-red); --gup-mu-series-13:var(--gup-p-cat-dk-dblue); --gup-mu-series-14:var(--gup-p-cat-dk-dorange); --gup-mu-series-15:var(--gup-p-cat-dk-dgrass); --gup-mu-series-16:var(--gup-p-cat-dk-dmagenta); --gup-mu-series-17:var(--gup-p-cat-dk-dteal); --gup-mu-series-18:var(--gup-p-cat-dk-dindigo); --gup-mu-series-19:var(--gup-p-cat-dk-dolive); --gup-mu-series-20:var(--gup-p-cat-dk-dgreen); --gup-mu-series-21:var(--gup-p-cat-dk-dred); --gup-mu-series-22:var(--gup-p-cat-dk-dpurple); --gup-mu-series-23:var(--gup-p-cat-dk-dpink); --gup-mu-series-24:var(--gup-p-cat-dk-dmoss); --ui-g-text:var(--gup-p-mq-d-g); } [data-gup-theme="executive"]{ --gup-surface-app:var(--gup-p-midnight-950); --gup-surface-primary:var(--gup-p-midnight-900); --gup-surface-secondary:var(--gup-p-midnight-850); --gup-surface-muted:var(--gup-p-midnight-850); --gup-surface-overlay:var(--gup-p-midnight-950); --input-bg:var(--gup-p-midnight-900); --input-bg-focus:var(--gup-p-midnight-900); --gup-text-primary:var(--gup-p-ink-055); --gup-text-secondary:var(--gup-p-ink-155); --gup-text-disabled:var(--gup-p-ink-355); --gup-border-default:var(--gup-p-midnight-750); --gup-border-strong:var(--gup-p-midnight-700); --gup-brand-ink:var(--gup-p-ink-055); --chart-grid:var(--gup-p-midnight-800); --chart-grid-soft:var(--gup-p-midnight-850); --chart-axis:var(--gup-p-midnight-700); --ui-p:var(--gup-p-mq-e-p); --ui-v:var(--gup-p-mq-e-v); --ui-m:var(--gup-p-mq-e-m); --ui-q:var(--gup-p-mq-e-q); --ui-f:var(--gup-p-mq-e-f); --ui-g:var(--gup-p-mq-e-g); --mg-p:var(--gup-p-mq-e-p); --mg-v:var(--gup-p-mq-e-v); --mg-m:var(--gup-p-mq-e-m); --mg-q:var(--gup-p-mq-e-q); --mg-f:var(--gup-p-mq-e-f); --mg-g:var(--gup-p-mq-e-g); --mg-on-p:var(--gup-p-ink-900); --mg-on-v:var(--gup-p-ink-900); --mg-on-m:var(--gup-p-ink-900); --mg-on-q:var(--gup-p-ink-900); --mg-on-f:var(--gup-p-ink-900); --mg-on-g:var(--gup-p-ink-900); --ui-on-fill:var(--gup-p-ink-900); --bd-frame:var(--gup-p-ink-055); --series-self:var(--gup-p-cat-l-blue); --series-1:var(--gup-p-cat-l-red); --series-2:var(--gup-p-cat-l-green); --series-3:var(--gup-p-cat-l-orange); --series-4:var(--gup-p-cat-l-purple); --series-5:var(--gup-p-cat-l-teal); --gup-target:var(--gup-p-orange-500); --gup-cg:var(--gup-p-cg-450); --ui-wc-pay:var(--gup-p-wc-pay-ek); --gup-on-fill:var(--gup-p-ink-900); --gup-action-primary:var(--gup-p-sig2-e-actionprimary); --gup-positive:var(--gup-p-sig2-e-positive); --gup-negative:var(--gup-p-sig2-e-negative); --gup-warning:var(--gup-p-sig2-e-warning); --gup-info:var(--gup-p-sig2-e-info); --gup-p-amber-050:var(--gup-p-tint-e-amber050); --gup-p-green-050:var(--gup-p-tint-e-green050); --gup-p-blue-050:var(--gup-p-tint-e-blue050); --gup-p-navy-050:var(--gup-p-tint-e-navy050); --gup-p-red-050:var(--gup-p-tint-e-red050); --gup-p-gold-050:var(--gup-p-tint-e-gold050); --gup-p-pink-050:var(--gup-p-tint-e-pink050); --gup-p-lime-050:var(--gup-p-tint-e-lime050); --gup-p-cyan-050:var(--gup-p-tint-e-cyan050); --gup-p-green-200:var(--gup-p-tint-e-green200); --gup-p-red-200:var(--gup-p-tint-e-red200); --gup-p-blue-200:var(--gup-p-tint-e-blue200); --gup-p-gold-200:var(--gup-p-tint-e-gold200); --gup-p-paper-2:var(--gup-p-tint-e-paper2); --gup-p-paper-3:var(--gup-p-tint-e-paper3); --surface-row:var(--gup-p-tint-e-surfacerow); --surface-cream-hover:var(--gup-p-tint-e-surfacecreamhover); --surface-kbd:var(--gup-p-tint-e-surfacekbd); --surface-box:var(--gup-p-tint-e-surfacebox); --surface-grid-head:var(--gup-p-tint-e-surfacegridhead); --surface-warm:var(--gup-p-tint-e-surfacewarm); --slider-track:var(--gup-p-tint-e-slidertrack); --matrix-hot-head:var(--gup-p-tint-e-matrixhothead); --matrix-hot-cell:var(--gup-p-tint-e-matrixhotcell); --matrix-hot-hover:var(--gup-p-tint-e-matrixhothover); --help-dot:var(--gup-p-tint-e-helpdot); --gup-color-text-on-accent:var(--gup-p-ink-900); --canvas-self:var(--gup-p-lit-e-canvasself); --gup-color-danger:var(--gup-p-lit-e-gupcolordanger); --text-blue-deep:var(--gup-p-lit-e-textbluedeep); --select-accent-dark:var(--gup-p-lit-e-selectaccentdark); --gup-brand-accent:var(--gup-p-lit-e-gupbrandaccent); --gup-color-accent-hover:var(--gup-p-lit-e-gupcoloraccenthover); --grey:var(--gup-p-lit-e-grey); --text-note:var(--gup-p-lit-e-textnote); --action-accent-hover:var(--gup-p-lit-e-actionaccenthover); --text-body:var(--gup-p-lit-e-textbody); --text-warm:var(--gup-p-lit-e-textwarm); --gup-action-primary-hover:var(--gup-p-lit-e-gupactionprimaryhover); --text-warm-note:var(--gup-p-lit-e-textwarmnote); --gup-company-role-value:var(--gup-p-lit-e-gupcompanyrolevalue); --gup-company-role-customer:var(--gup-p-lit-e-gupcompanyrolecustomer); --gup-company-role-foundation:var(--gup-p-lit-e-gupcompanyrolefoundation); --ura-head:var(--gup-p-lit-e-urahead); --p-blue:var(--gup-p-lit-e-pblue); --gup-scenario-forecast:var(--gup-p-lit-e-gupscenarioforecast); --select-accent:var(--gup-p-lit-e-selectaccent); --q-green:var(--gup-p-lit-e-qgreen); --ura-head-dark:var(--gup-p-lit-e-uraheaddark); --gup-mu-series-1:var(--gup-p-cat-ek-blue); --gup-mu-series-2:var(--gup-p-cat-ek-olive); --gup-mu-series-3:var(--gup-p-cat-ek-teal); --gup-mu-series-4:var(--gup-p-cat-ek-pink); --gup-mu-series-5:var(--gup-p-cat-ek-green); --gup-mu-series-6:var(--gup-p-cat-ek-purple); --gup-mu-series-7:var(--gup-p-cat-ek-grass); --gup-mu-series-8:var(--gup-p-cat-ek-magenta); --gup-mu-series-9:var(--gup-p-cat-ek-indigo); --gup-mu-series-10:var(--gup-p-cat-ek-orange); --gup-mu-series-11:var(--gup-p-cat-ek-moss); --gup-mu-series-12:var(--gup-p-cat-ek-red); --gup-mu-series-13:var(--gup-p-cat-ek-dblue); --gup-mu-series-14:var(--gup-p-cat-ek-dorange); --gup-mu-series-15:var(--gup-p-cat-ek-dgrass); --gup-mu-series-16:var(--gup-p-cat-ek-dmagenta); --gup-mu-series-17:var(--gup-p-cat-ek-dteal); --gup-mu-series-18:var(--gup-p-cat-ek-dindigo); --gup-mu-series-19:var(--gup-p-cat-ek-dolive); --gup-mu-series-20:var(--gup-p-cat-ek-dgreen); --gup-mu-series-21:var(--gup-p-cat-ek-dred); --gup-mu-series-22:var(--gup-p-cat-ek-dpurple); --gup-mu-series-23:var(--gup-p-cat-ek-dpink); --gup-mu-series-24:var(--gup-p-cat-ek-dmoss); --ui-g-text:var(--gup-p-mq-e-g); } [data-gup-theme="digital"],[data-gup-theme="executive"]{ color-scheme:dark; } /* ============================================================================ brand-font.css — ヘッダのロゴ「Gup」に使う書体（Orbitron SemiBold 600） ★このアプリは単一 HTML の offline 配布なので、**外部 font を読みに行かない**。 Google Fonts の link も CDN も使わず、書体そのものを data: URI で埋め込む。 実行時の external request は 0 のまま（build の verifyHtml が絶対 URL を弾く）。 ★family 名を 'Orbitron SemiBold' としてウェイト記述子を持たせない。 字形がすでに SemiBold なので、使う側は font-weight を 400（regular token）のまま置ける。 こうすると UI-TYPE1 の契約（CSS の font-weight はすべて token 参照・ component に 500/600/800/900 の直値を書かない）を崩さずに済む。 ★書体: Orbitron（SIL Open Font License 1.1）。埋め込み・再配布が許諾されている。 収録は latin サブセット 1 種類だけ（6,588 bytes）。 ★使うのは .brand h1（ヘッダのロゴ）だけ。本文・入力欄・表には広げない。 ============================================================================ */ @font-face{ font-family:'Orbitron SemiBold'; font-style:normal; src:url(data:font/woff2;base64,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) format('woff2'); } /* UI-COLOR1: 色 token の正本は styles/tokens.css の 1 か所だけ。 ここには余白・文字サイズなど色以外のスケールだけを残す。色をここへ書き足さない。 */ :root{ /* ===== 情報階層 ===== */ /* ===== 面の階層 ===== */ /* ===== 装飾・図表 ===== */ /* ===== MG伝統配色（デッキと共通・箱型図のベタ塗り用） ===== */ /* ===== UIトーン（同色相の作業画面用・レバー/タグ/数値） ===== */ /* 入力欄の統一スタイル */ /* ============================================================ ===== デザイントークン（2026/07〜 新規追加分。既存ルールは変更していません） ===== 以下は「今後、新しいCSSを書くときはこれを優先的に使う」という基準です。 既存の306個のクラス・26種類のフォントサイズ・12種類のmargin-topは このタイミングでは一切書き換えていません（見た目は完全に現状のまま）。 ============================================================ */ /* ----- 余白スケール：5段階のみ。この5つ以外の数値を新規に使わない ----- */ --sp-1:4px; /* 最小単位。アイコンの内側、詰めたグループの中の間隔 */ --sp-2:8px; /* 標準の小余白。ラベルと値の間、行と行の間隔 */ --sp-3:12px; /* カード内の小セクション同士の区切り */ --sp-4:16px; /* カード間・カード内の主要セクションの区切り（最も使用頻度が高い） */ --sp-5:24px; /* カラム間や、明確に離したい大きな区切り */ /* ----- 文字サイズスケール：役割ごとに5段階＋特別枠1つ ----- */ --fs-label:12px; /* 補助ラベル・注記・凡例・ヘルプ文の小さい文字 */ --fs-body:14px; /* 本文・説明文・入力欄の標準サイズ */ --fs-ui:16px; /* ボタン・タブ・通常の操作UIの文字 */ --fs-number:20px; /* テーブルの数値など、通常の数値表示 */ --fs-display:28px; /* Gや簡易CFなど、最重要な数値だけに使う強調表示 */ --fs-hero:36px; /* アプリ内で唯一無二、一番目立たせたい数字専用（②感度分析のG比較バナー等）。乱用しない */ /* ----- 色の使い分け（新色は増やさず、既存変数の「役割」を明文化するだけ） ----- 選択・操作中の状態　　　→ --action-accent（青／フォーカス枠・リンク・ホバー等で既に使用中） 最重要な数字・アクティブなタブ → --header-gold（ヘッダー内の利益G・タブのアクティブ状態） 良い／悪いの判定色　　　→ --good（緑）／--bad（赤） P・V・Q・F・M・Gのレバー色　→ --ui-p／--ui-v／--ui-q／--ui-f／--ui-m／--ui-g（感度分析・簡易CF等で統一使用中） 戦略投資4分類のタグ色　　→ --chip-red／--chip-blue／--chip-yellow／--chip-green カード見出しの装飾バー　　→ --bar-accent（濃さ違いで--bar-accent-2／-3もあり） 新しく色が欲しくなった時は、まずこの一覧に当てはまる色が無いか確認してから追加する。 ------------------------------------------------------------------------- */ } /* UI-TYPE2（Founder 判断）：見出しにも段を持たせる。 h3 は規則が無く、ブラウザ既定（1.17em＝18.72px）で出ている箇所があった。 セクション見出しは 18px（--gup-fs-lg）。class や id で指定している h3 はそちらが勝つ。 */ h3{font-size:var(--gup-fs-base);} /* UI-TYPE6：セクション見出しは 16px（18 と 20 は 2px しか違わず段にならない） */ /* 全入力欄の統一ベース */ input[type=text],input[type=number],input[type=search],input[type=password],input[type=email],input[type=url],input[type=tel],textarea,select{ background:var(--input-bg); color:var(--gup-text-primary); } /* UX-SYSTEM1A：