/* Tanuki — デザインシステム "Instrument" / Precision Scientific Workstation * 正典は design.md。このファイルが**値の唯一の出所**。 * * 2026-07-26 改定 (科学解析ワークステーション化): * - 面は**低彩度ニュートラル**に統一 (旧: teal 210° に寄った有彩色サーフェス)。 * 計測器・業務用映像機器の質感は、色ではなく「明度差 / 1px 境界 / 寸法 / 整列」で作る。 * - アンカーは **低彩度スチールブルー**。役割は操作信号のみ (フォーカス / 選択 / 主操作 / * ドラッグ先 / スナップ先)。装飾・大面積塗り・カテゴリ色分けには使わない。 * - **ダークを第一級で再導入**し、ライトは反転ではなく独立に設計する * (`[data-theme="dark"]` / 既定 = light。theme.js が切替、system 追従も可)。 * * 値は sRGB hex で保持する。理由: Canvas/SVG 書き出しが getComputedStyle 経由でこの文字列を * そのまま運ぶため、oklch() を書くと Illustrator 等の SVG 取込みで色が壊れる。 * **正準トークン名は JS (plot.js / drawqueue.js / theme.js ほか) が直接読むため不変。値のみ更新可。** */ /* ============ フォント (同梱 IBM Plex Sans — OFL-1.1, ui/fonts/) ============ */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } /* ===================================================================== テーマ非依存トークン (寸法 / 密度 / タイポ / モーション / レイヤー) ===================================================================== */ :root { /* ---- 4pt スケール ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ---- 角丸 ---- ワークステーション UI は角丸を主張しない。窓 3px / コントロール 3px / 浮遊面 4px / 大面 6px。pill は「円形であることが機能的」なもの (ⓘ) だけ。 */ --radius-ctl: 3px; /* 入力 / 選択 / ボタン / 表内チップ (テストが 3px を固定) */ --radius-sm: 3px; /* 子ウィンドウ枠・小面 */ --radius-md: 4px; /* 浮遊面 (メニュー / ポップオーバー / モーダル) */ --radius-lg: 6px; /* 大きな面 (ドロップ領域) — これ以上大きくしない */ --radius-pill: 999px; /* ---- コントロール密度 ---- */ --control-h: 24px; --control-h-sm: 20px; --space-gap-row: 6px; /* ---- クロームの寸法 (D-60) ---- 「同じ役割のコンポーネントは同じ寸法」を破らないための単一の出所。 生 px でクローム高さを書かない。 */ --menubar-h: 42px; /* ブランドを含むアプリメニューバー */ --toolbar-h: 38px; /* アプリ共通ツールバー */ --titlebar-h: 28px; /* 子ウィンドウ / ダイアログのタイトルバー */ --wintoolbar-h: 26px; /* 子ウィンドウ専用ツールバー (タイトルバー直下) */ --statusbar-h: 24px; /* 一行ステータスバー */ --menu-item-h: 24px; /* メニュー項目 */ --row-h: 22px; /* テーブル行 (標準密度) */ --row-h-compact: 18px; /* テーブル行 (高密度) */ --splitter-w: 4px; /* スプリッタ / ドックの掴み手 */ --icon-sm: 14px; --icon-md: 16px; --icon-lg: 18px; /* R11-16: 線画アイコンの線幅は**この 1 つだけ**。個々の規則や SVG の属性に 生値を書かない (実測で線幅 9 種 / 寸法 8 種が混在していた)。 viewBox は 16 に統一してあるので、--icon-sm/md のどちらで描いても 見た目の線幅は揃う (0.875〜1.0 の差に収まる)。 */ --icon-stroke: 1.3; --icon-gap: 6px; /* アイコン ⇔ ラベル */ /* ---- 余白の役割 (D-49) ---- */ --gap-inline: 6px; /* 同一行に並ぶ要素の間 */ --gap-stack: 6px; /* 行と行の間 */ --gap-group: 10px; /* グループと次の要素の間 */ --gap-section: 14px; /* 節と節の間 */ --pad-panel: 10px; /* パネル/ダイアログ本文の内側パディング */ --pad-ctl-x: 8px; --pad-ctl-x-sm: 6px; --select-arrow-w: 20px; /* ---- モーション (ブラウザ既定 ease 禁止) ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-short: 120ms; --dur-med: 180ms; /* ---- レイヤー ---- */ --z-float: 10; /* フライアウト/ドロップダウン */ --z-sticky: 20; /* 固定ヘッダ類 */ --z-overlay: 100; /* パネルオーバーレイ */ --z-modal: 200; /* モーダル */ --z-toast: 300; /* トースト/ドロップ表示 */ --z-menu: 400; /* メニュー/コンテキストメニュー */ /* ---- タイポグラフィ ---- 役割定義は design.md の「タイポグラフィの 13 役割」表が正典。ここは寸法だけを持つ。 */ --font-ui: "IBM Plex Sans", system-ui, "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Noto Sans Mono", monospace; --ui-font-size: 13px; /* 設定画面が上書き */ --fs-xs: 10px; /* caption / badge / eyebrow */ --fs-sm: 11px; /* label / secondary */ --fs-base: 12px; /* body / input value / menu item */ --fs-md: 13px; /* emphasis value / sub-heading */ --fs-lg: 14px; /* metric / result */ --fs-xl: 16px; /* heading */ --lh-tight: 1.25; --lh-normal: 1.5; /* 字間: 全大文字を廃した以上、正のトラッキング (大文字組の作法) は使わない。 11〜12px の混植に 0.06em を掛けると単語がばらけて読み速度が落ちる。 見出しは字間ではなくサイズ・太さ・色・余白で段を作る (D-70)。 */ --tracking-tight: 0.01em; /* 説明文の最大行長 (可読性の上限を 1 か所で決める) */ --measure-help: 52ch; } /* ===================================================================== ライトテーマ (既定) — ダークの反転ではなく独立に設計 純白を大面積に使わない / わずかに冷たい低彩度ニュートラル / 面の分離は微細な明度差で行い、影を増やして補わない ===================================================================== */ :root, [data-theme="light"] { color-scheme: light; /* ---- サーフェス (奥→手前の 4 段。明度は単調に増える: bg < bg-deep < panel < panel-2) ---- bg = 装置の筐体 (メニューバー / ステータスバー / スプリッタの地) bg-deep = ワークスペースの空 — 窓が浮くための面 panel = パネル / ツールバー / 表ヘッダ panel-2 = 紙 = 作業面 (シートのセル・プロット地・浮遊面) ダークと**同じ並び順**にしてあるので、テーマを切り替えても「手前ほど明るい」規則が崩れない。 */ /* D-110 (2026-08-05): **机を深くする**。旧値は bg #dee2e6 (L*89.7) / bg-deep #e5e8ea (L*91.8) で、紙 (L*98.9) との差が 7.09 ΔL* しかなく、 4 段の面が「白っぽい 1 枚」に溶けていた (のっぺりの主因)。段の**順序**は 正しかったが、**振れ幅**が足りていなかった。紙と panel は動かさず、 机と筐体だけを沈めて 15.27 ΔL* にする。影を強くするのではなく、 **影が見える地**を作るのが目的 (--shadow-win は不変)。 */ --bg: #bdc1c5; /* 筐体 (L*77.9)。メニューバー / ステータスバーの地 */ --bg-deep: #c8ccd0; /* ワークスペース = 机 (L*81.8)。窓はこの上に置かれる */ --panel: #eef0f2; /* パネル / ツールバー / 表ヘッダ */ --panel-2: #fbfcfd; /* 紙 = 作業面。純白ではない */ --panel-border: #cdd2d7; /* ヘアライン */ --border-strong: #a9b1b8; /* 強い境界 (アクティブ窓・入力の縁) */ /* R9-M10: 表の端が「まだ先がある」ことを示す掃き寄せ。 旧実装は --text 由来だったので、ダークでは**明るくなり**グロー同然だった (掃き寄せは常に地より沈む = 影として読めなければならない)。テーマごとに実色で持つ。 */ --scrim-edge: rgba(26, 31, 36, 0.20); /* R9-H3: **操作できるものの輪郭**。ボタン / 入力 / セレクトは、輪郭だけが 「これはコントロールだ」と言う唯一の手掛かりになることがあるので、 地 (--panel / --panel-2 のどちらに乗っても) に対し 3:1 以上を確保する (WCAG 1.4.11)。--panel-border は面の区切りのヘアラインで 1.3:1 しかなく、 フィット窓のフッタでは Preview / Step / Save が「浮いた文字列」に見えていた。 地の区切り (パネルの仕切り線) には引き続き --panel-border を使う。 */ /* D-110: 机を沈めたぶん、机の上に置かれる輪郭 (窓の外周) も濃くする。 旧 #7d868e は新しい机に対し 2.45:1 で、自分に課した 3:1 を割っていた。 */ --control-border: #656e77; /* vs --panel 4.54:1 / vs --panel-2 5.05:1 / vs 机 3.21:1 */ /* D-111 (2026-08-05): **枠線に安静→hover→focus の 3 段階を作る**。 R9-H3 の契約 (操作できるものの輪郭は 3:1 以上) は正しいが、旧実装は全ての入力が 常時 --control-border (panel 上 4.5:1) で、10 個の入力が並ぶパネルでは 10 個の濃い矩形が等しく主張していた。安静時は契約の下限近く (3.2:1) に置き、 hover で --control-border、focus で --accent へ上げる。 ボタンは安静時から --control-border のまま (輪郭だけが「押せる」と言う唯一の 手掛かりになる場面があるため — フィット窓フッタの実測 R9-H3)。 */ --field-border: #7d868e; /* 入力/セレクトの安静時 — vs --panel 3.24:1 / vs --panel-2 3.60:1 */ /* R10-C2: アクティブ窓の外周。**必ず非アクティブ (--control-border) より強い**こと。 旧実装は --border-strong (#a9b1b8 = 紙より薄い) を使っていたので、 アクティブ窓の輪郭が画面上でもっとも弱くなり、手掛かりが逆向きに働いていた。 */ --border-active: #414a53; /* vs --bg-deep 5.58:1 (非アクティブは 3.21:1) */ /* D-110: **筐体の上に載る副テキスト**。--muted (#55606a) は新しい筐体 (L*79.3) の上で 4.08:1 と本文基準を割る。面で階層を作り文字は読めるようにする、という --titlebar-ink (R10-C3) と同じ理屈で、この面専用の色を持つ。 */ --chrome-ink: #e7edf2; /* 上部クローム上の主文字 */ --chrome-ink-muted: #b7c3cc; /* 上部クローム上の副文字 */ --chrome-bg: #27343f; /* ブランドとメニューを受け止めるアプリバー */ --chrome-border: #40515e; /* アプリバー下端の境界 */ --chrome-hover: rgba(255, 255, 255, 0.10); /* ---- テキスト ---- */ --text: #1a1f24; /* 主テキスト — panel 上 14.5:1 */ --muted: #55606a; /* 副テキスト — panel 上 5.9:1 */ /* 無効化された要素**専用**。本文・ラベルには使わない (使うと 4.5:1 を割る)。 WCAG は無効化要素を対象外にするが、読めない灰色は避けたいので panel 上 4.7:1 に置く。 */ --text-disabled: #626c74; /* ---- アンカー: 低彩度スチールブルー ---- --accent = 操作信号 (フォーカス / 選択指示 / ドラッグ先 / ハンドル) --accent-solid = 主操作ボタンの塗り (1 操作領域に 1 つ) この 2 つを分けるのは、指示線に必要な明度と、塗りの上に白文字を載せる明度が違うため。 */ /* --sel-bg (accent 12%) の面の上に accent 文字を載せる箇所 (選択中のタブ / セグメント) が あるため、そこで 4.5:1 を満たす明度に置く。#2f6e9e では 4.1:1 で足りなかった。 */ --accent: #2a6491; --accent-hover: #215075; --accent-solid: #35638c; --accent-solid-hover: #2b5477; --accent-text: #f5f8fa; /* accent-solid 上の文字 — 5.6:1 */ /* ---- データシグナル (UI アンカーとは意味を分ける) ---- */ --fit-color: #c0392b; /* フィット曲線 = 温色。系列色ともアンカーとも衝突しない */ /* ---- データ系列パレット (D-72) ---------------------------------------- ここは **UI の色ではなくデータの色**。UI アクセントとは別系統で、 ライト/ダークで独立に設計する (反転はしない)。**正典は design.md** 「データ系列パレット」で、条件は 7 つ (地 3:1 / 系列間 ΔE00 12 / fit・accent・UI インクと ΔE00 15・12 / L* の広がり 22 以内 / C* 最大 58 以内 / アクセントの色相帯 ±30° を避ける)。 距離は **CIEDE2000** で測る (CIE76 は彩度差を過大評価し、 見分けのつかない青どうしを ΔE 18 = 合格にしてしまう — R8-C1)。 数値の実測は `ui/tests/suite.js` の D-72 が毎回行うので、ここには **守れていない保証を書かない** (R9-L21/L22)。 旧実装は Google Material の 7 色を util.js に直書きしており、テーマ非対応 (ダークで 7 色中 6 色が 3:1 未満)・緑が 2 色ほぼ同一 (ΔE 5.9) だった。 赤/橙は --fit-color に予約しているのでパレットからは外している。 */ /* R9-H5: **データパレットに青は置かない**。UI アクセントが青を持っている以上、 中明度・中彩度の青は必ずアクセントと近くなる (R8 では濃紺 #16357d へ逃がしたが、 今度は L*24 = 他の系列の半分の明るさになり、データではなく軸のインクと競合した。 ダーク側の #6d78fc は逆に C*75 = 製品内で最も高彩度の物体になった)。 青の枠を外すと L* も C* も揃い、外れ値が消える。赤/橙は --fit-color の予約。 */ --series-1: #0a7d5a; /* 緑 */ --series-2: #7a4ea3; /* 紫 */ --series-3: #1c7a86; /* 青緑 */ --series-4: #8a6d1f; /* 金 */ --series-5: #b0407f; /* 赤紫 */ --series-6: #556b1e; /* 苔 */ --series-7: #544846; /* 温灰 — UI の灰 (--muted / --text-disabled) とも ΔE00 12 以上 */ /* ---- 状態色 ---- */ --good: #1d7a4c; --warn: #8a6410; --bad: #b3352c; /* ---- 面の状態 (色だけに頼らず、必ず境界/文字と併用する) ---- */ --sel-bg: rgba(42, 100, 145, 0.12); /* 選択 (弱) */ --surface-hover: #e2e6ea; /* ホバー = 無彩色の面差。accent 塗りにしない */ --surface-active: rgba(42, 100, 145, 0.22);/* 選択 (強) — 旧 #bce7ec の大面積シアンを廃止 */ --surface-sunken: #e8ebee; /* 入力欄などの凹面 */ /* ---- グラフ ---- */ --grid-color: rgba(40, 55, 70, 0.12); /* ---- 結果 (琥珀 — 解析結果の種別色。状態色 warn とは役割が違う) ---- */ --result-ink: #6c5005; --result-bg: #f7eed9; --result-border: #ddc99a; --result-hover: #f0e3c1; /* ---- クローム ---- */ /* --titlebar-active を --panel-2 (#fbfcfd) と同値にすると、タイトルバーが紙面に 溶けてアクティブ窓を識別できなくなる (実測: 4 窓を並べると判別不能) ので、 紙のすぐ手前に置く。 非アクティブは**ワークスペース (--bg-deep) より手前**に留める — 面の階層 (bg < bg-deep < panel < panel-2) を破ると「窓が地面に沈む」ことになる。 */ /* 非アクティブ窓のタイトルバー。アクティブ (--titlebar-active #fafbfc) との差を 20/255 → 実効で広げるため一段下げる。加えてアクティブ側は紙 (--panel-2 #fbfcfd) との差が 6/255 しかなく、面という最も面積の大きい手掛かりが効いていなかった。 */ /* R10-C2: ライトの明度差が 5.66 ΔL* しかなく、ダーク (12.24 ΔL*) の半分以下だった = 同じ「アクティブ」の手掛かりがテーマによって 2.2 倍違う。ふつうの面の段 (panel→panel-2 = 4.22 ΔL*) と大差なく、「別の面」と「アクティブ」が区別できない。 非アクティブを一段下げて 11.56 ΔL* にし、ダークと同じ強さに揃える。 */ /* D-110: ここは**実バグの修正**でもある。この行のすぐ上に「非アクティブでも ワークスペースより手前に留める — 面の階層を破ると窓が地面に沈む」と書いてありながら、 旧 #c9d2d9 (L*83.7) は旧ワークスペース #e5e8ea (L*91.8) より **8.11 ΔL* 暗く**、 規律が逆向きに破れていた (R10-C2 でアクティブとの差を稼ぐため下げた副作用。 当時のテストは active⇔inactive の差しか測っておらず、机との関係を見ていなかった)。 机を沈めたので、帽は机の**上**へ戻す。アクティブとの差 9.51 ΔL* は維持する。 */ --titlebar: #d3d7db; /* 非アクティブ窓 (机より +3.94 ΔL* / アクティブとの差 9.49 ΔL*) */ /* R10-C2/C3: 非アクティブのタイトルバーは面を一段下げたので、その上の文字は --muted (#55606a = 4.19:1) では 4.5:1 を割る。**面で階層を作り、文字は読める** という .mdi-titlebar の方針どおり、この面専用の副テキスト色を持つ。 */ --titlebar-ink: #48515a; /* 非アクティブのタイトルバー上 5.58:1 */ --titlebar-active: #eef2f5; /* アクティブ窓 = 紙のすぐ手前。 ここを紙 (#fbfcfd) へ寄せすぎると D-86b「アクティブのタイトルバーが紙面に溶けていない」 が落ちる (帽と紙の区別が付かなくなる)。紙との差を保ったまま、非アクティブ側を 下げて 9.49 ΔL* を作る。 */ /* 影は「重なりがある要素」だけに、弱く。面階層の代用にしない。 */ --shadow: 0 1px 2px rgba(20, 28, 36, 0.10); --shadow-win: 0 2px 6px rgba(20, 28, 36, 0.10), 0 0 0 1px rgba(20, 28, 36, 0.03); --shadow-win-active: 0 4px 14px rgba(20, 28, 36, 0.16); --shadow-overlay: 0 6px 20px rgba(16, 22, 28, 0.16); --shadow-modal: 0 10px 30px rgba(16, 22, 28, 0.22), 0 1px 3px rgba(16, 22, 28, 0.12); --focus-ring: 0 0 0 1px var(--panel-2), 0 0 0 3px var(--accent); --on-scrim: #fdfefe; /* R12-1: **データ色の上に載せる 2 色**。カラーマップ (行列のヒートマップ) は 面全体がデータなので、操作信号を色相で分離できない。カーソルは この 2 色の二重リングで示し、どの値の上でも読めるようにする。 テーマ非依存 (データの色は両テーマで同じため)。 */ --ondata-hi: #ffffff; --ondata-lo: #101114; } /* ===================================================================== ダークテーマ — 主対象。低彩度ニュートラル + スチールブルーの操作信号。 ゲーム/AI サービス風の高彩度・グロー・ネオンは使わない。 ===================================================================== */ [data-theme="dark"] { color-scheme: dark; /* ---- サーフェス (奥→手前の 4 段。差は 4〜6% 明度で、境界線と併用) ---- */ /* D-110: ライトと同じ理由で机を沈める。紙 (L*18.1) と机の差が 6.12 ΔL* しかなく、 4 段が「暗い 1 枚」に溶けていた。panel / panel-2 は動かさず 10.97 ΔL* へ。 */ --bg: #0e1114; /* アプリ外周 (L*4.9) */ --bg-deep: #141619; /* ワークスペース = 机 (L*7.2) */ --panel: #22272c; /* パネル / ツールバー / 表ヘッダ */ --panel-2: #272d33; /* 紙 = 作業面 (シートのセル・プロット地・浮遊面) */ --panel-border: #343a40; --border-strong: #495159; --scrim-edge: rgba(0, 0, 0, 0.45); /* R9-M10: 暗い地でも「沈む」向きに掃き寄せる */ --control-border: #78838d; /* R9-H3: vs --panel 3.89:1 / vs --panel-2 3.60:1 */ /* D-111: 安静時の入力枠 (ライトと同じ 3 段階)。 */ --field-border: #6e7983; /* vs --panel 3.39:1 / vs --panel-2 3.13:1 */ --border-active: #9aa5af; /* R10-C2: vs --bg-deep 7.23:1 (非アクティブは 4.69:1) */ /* D-110: ダークの筐体は十分に暗いので --muted のままで 8.53:1 出る。 トークン名を両テーマで揃えることで、使う側がテーマを意識しなくて済む。 */ --chrome-ink: #e7edf2; /* 上部クローム上の主文字 */ --chrome-ink-muted: #a7afb7; /* 上部クローム上の副文字 */ --chrome-bg: #151a1f; /* ダークテーマのアプリバー */ --chrome-border: #303a43; --chrome-hover: rgba(255, 255, 255, 0.09); /* ---- テキスト ---- */ --text: #e3e6e8; /* panel 上 12.3:1 */ --muted: #a7afb7; /* panel 上 6.3:1 */ /* 無効・補足。本文には使わない。panel 上 4.8:1。 */ --text-disabled: #8b949c; /* ---- アンカー ---- */ --accent: #6fa6d1; /* 操作信号 — panel 上 5.7:1 */ --accent-hover: #8bb9dd; --accent-solid: #3f6f95; /* 主操作の塗り */ --accent-solid-hover: #4b789b; --accent-text: #f5f8fa; /* accent-solid 上 5.0:1 */ /* ---- データシグナル ---- */ --fit-color: #e2694a; /* 暗い地でも読める温色 */ /* データ系列 (ダーク): 明度を上げた独立セット。地 #272d33 に対し 5.0:1 以上。 R9-L22: 実測は D-72 が毎回検証する (以前この行は 5.0:1 と書きながら --series-1 が 3.80:1 で、ファイルが守れていない保証を書いていた)。 */ /* D-95: 旧 #6aa6e8 は --accent (#6fa6d1) と ΔE 13.0 で、自分に課した閾値 15 を 割っていた。「accent = 操作信号 / 系列色 = データ」という分離が、実画面では 色が見分けられないために成立していなかった (フィットの範囲ガイドとデータ点が同色)。 */ /* R9-H5: ライトと同じ理由で青を置かない。並びもライトと対応させる。 */ --series-1: #3fb98d; /* 緑 */ --series-2: #b489e0; /* 紫 */ --series-3: #45b5c0; /* 青緑 */ --series-4: #d0aa4a; /* 金 */ --series-5: #e07ab0; /* 赤紫 */ --series-6: #91a362; /* 苔 */ --series-7: #b5a29c; /* 温灰 — UI の灰 (--muted / --text-disabled) とも ΔE00 12 以上 */ /* ---- 状態色 (暗所で沈まない明度へ持ち上げる) ---- */ --good: #4caf82; --warn: #d4a544; --bad: #e0685f; /* ---- 面の状態 ---- */ --sel-bg: rgba(111, 166, 209, 0.14); --surface-hover: #2a3036; /* R9-H4: ダークの選択面は薄すぎて、**第 1 段 (レベル) の選択が第 2 段 (タブ) より 弱い**という階層の逆転を起こしていた (ΔL* 10.4 対 14.3)。絶対規約で一辺の線は 使えないので、面の明度差だけで階層を出す必要がある。ライトの ΔL* 12.4 に揃える。 */ --surface-active: rgba(111, 166, 209, 0.30); --surface-sunken: #191d21; /* 入力欄 = 沈んだ面 */ /* ---- グラフ ---- */ --grid-color: rgba(167, 175, 183, 0.16); /* ---- 結果 (琥珀) ---- */ --result-ink: #e8c98a; --result-bg: #332c1c; --result-border: #574a2c; --result-hover: #3d3524; /* ---- クローム ---- */ /* ライトと同じ規律: 非アクティブでもワークスペース (--bg-deep #1c2024) より手前。 */ --titlebar: #1f2429; /* 非アクティブ窓 */ --titlebar-ink: #97a2ac; /* R10-C3: 非アクティブのタイトルバー上 */ --titlebar-active: #363f47; /* アクティブ窓 = はっきり持ち上がる */ /* 暗い地では影が効きにくい。輪郭 (1px) を主、影を従にする。 */ --shadow: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-win: 0 2px 6px rgba(0, 0, 0, 0.42); --shadow-win-active: 0 4px 16px rgba(0, 0, 0, 0.52); --shadow-overlay: 0 6px 20px rgba(0, 0, 0, 0.50); --shadow-modal: 0 12px 34px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40); --focus-ring: 0 0 0 1px var(--bg-deep), 0 0 0 3px var(--accent); --on-scrim: #fdfefe; }