/* CurioBox カラートークン
サイト全体（index.html と lab/）で使う色をすべてここに集約する。
HTML 側に生の hex / rgba を書かないこと。
例外が 2 つある:
- は HTML 属性なので var() を使えない。
--bg と同じ値を直接書いてあるので、--bg を変えたら手で合わせること。
- canvas の粒の色 (--mote-*) は JS が getComputedStyle で読み取る。
rgba() の前 3 成分だけを持たせているのはこのため。 */
:root {
/* ---- 面・テキスト ---- */
--bg: #0d0f14;
--panel: rgba(23, 26, 34, .72); /* カード面。backdrop-filter 前提の半透明 */
--fg: #eceef2;
--muted: #8b94a5;
--border: rgba(255, 255, 255, .09);
--shadow: rgba(0, 0, 0, .7); /* カードの落ち影 */
/* ---- アクセント（箱・きらめき） ---- */
--accent: #ffb648;
--accent2: #ff8a3d;
--accent-hi: #ffd9a0; /* きらめきグラデーションの上端 */
--accent-rgb: 255, 182, 72; /* --accent と同値。透過指定の合成用 */
--box-inner: rgba(var(--accent-rgb), .1); /* 箱の内側の面 */
--glow: rgba(255, 162, 60, .13); /* ロゴ背後の淡い光。accent より赤寄り */
/* ---- 好奇心の粒（トップページの浮遊リンク）----
canvas の粒と同じ色で光らせて、環境光の中に紛れさせる。
--mote-warm を rgba() の前 3 成分として共有しているので、
粒の色を変えると浮遊リンクの色も一緒に動く */
--orb: rgba(var(--mote-warm), .95); /* 粒の芯 */
--orb-halo: rgba(var(--mote-warm), .22); /* 芯のまわりの光暈 */
--orb-ring: rgba(var(--accent-rgb), .38); /* 近づくと浮かぶ輪 */
/* ---- ステータス ---- */
--ok: #4ade80;
/* ---- canvas の粒（JS が読む。rgba() の前 3 成分） ---- */
--mote-warm: 255, 178, 82;
--mote-cool: 210, 220, 240;
/* ================= 実験装置（lab/）=================
グラフの系列色は目分量で選ばない。明度帯・彩度・色覚多様性での
分離・背景とのコントラストを検証して通った値だけを置いてある。
--accent (#ffb648) は明度がダーク面の帯を外れるので、線や帯などの
マークには使わないこと（見出しや枠のアクセントとしては従来どおり）。 */
/* 2 系列。停止距離の 空走/制動、資産の 複利/単利 で共通に使う。
warm = 主役（伸びていく方）、cool = 比較対象 */
--series-warm: #d95926;
--series-cool: #3987e5;
--series-warm-rgb: 217, 89, 38; /* --series-warm と同値。面の塗り用 */
--series-cool-rgb: 57, 135, 229; /* --series-cool と同値 */
/* 同じ系列を沈ませて見せる用（合成波に対する部品の波など、
主役の後ろに何本も重ねるもの）。凡例の色見本もこれを参照する */
--series-warm-soft: rgba(var(--series-warm-rgb), .32);
--series-cool-soft: rgba(var(--series-cool-rgb), .45);
/* 暗号ページの登場人物。図の中で 3 つが隣り合うため、
隣接ペアではなく全ペアで分離を確認した組み合わせ */
--actor-a: #3987e5; /* アリス（送る人） */
--actor-b: #c98500; /* ボブ（受け取る人） */
--actor-e: #d55181; /* イヴ（盗み見る人） */
/* グラフと操作パネルの下地 */
--grid: rgba(255, 255, 255, .07); /* 目盛り線。主張させない */
--axis: rgba(255, 255, 255, .22); /* 軸線・基準線 */
--track: rgba(255, 255, 255, .06); /* スライダーの溝、帯の下地 */
--surface-2: rgba(255, 255, 255, .035); /* カードの中のもう一段深い面 */
}