/* shared/figures.mjs が描くステップ図の配色。
   アプリ（web/src/style.css から @import）と紹介サイト（/figures.css として配信）の
   両方が読む。SVG の presentation 属性には var() が書けないため、図の色は
   すべてここのクラス経由で当てる。

   前提として、読み込む側が --main / --accent / --text / --muted / --panel /
   --border / --ctl-bg / --ctl-border / --checker-a / --checker-b を定義していること。
   アプリはテーマ変数、サイトはネオン固定値を入れているので、同じ図がどちらでも
   地の色に馴染む。 */

.tf-panel { fill: color-mix(in srgb, var(--main) 12%, transparent); stroke: var(--border); }
.tf-ctl { fill: var(--ctl-bg); stroke: var(--ctl-border); }
/* ウィンドウの外枠。var(--border) では細くて枠に見えないため、輪郭だけ強めに出す */
.tf-win, .tf-desktop, .tf-stage { stroke: color-mix(in srgb, var(--accent) 40%, transparent); }
.tf-win { fill: color-mix(in srgb, var(--main) 10%, transparent); }
.tf-desktop { fill: color-mix(in srgb, var(--muted) 14%, transparent); }
.tf-stage { fill: #000000; }
.tf-main { fill: var(--main); }
.tf-accent { fill: var(--accent); }
.tf-line { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.tf-arrow { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.tf-arrow-head { fill: var(--accent); }
.tf-drop { fill: none; stroke: var(--accent); stroke-dasharray: 5 4; }
.tf-cursor { fill: var(--text); stroke: var(--panel); stroke-width: 1; }
/* アバターのシルエットは currentColor で塗るので、色は親の color で与える */
.tf-ava { color: var(--accent); }
.tf-icon-line { stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 手順の中で「ここを押す」を示す強調リング */
.tf-ring { fill: none; stroke: var(--accent); stroke-width: 2; }

/* 背景「なし」のタイルは出力プレビューと同じ市松模様で表す */
.tf-checker-a { fill: var(--checker-a); }
.tf-checker-b { fill: var(--checker-b); }
.tf-tile { stroke: var(--ctl-border); }

/* 3D シーンのタイル: 一点透視の部屋。面ごとの濃淡だけで立体に見せる */
.tf-room-back { fill: color-mix(in srgb, var(--main) 18%, transparent); }
.tf-room-side { fill: color-mix(in srgb, var(--main) 34%, transparent); }
.tf-room-floor { fill: color-mix(in srgb, var(--main) 52%, transparent); }
.tf-room-line {
  fill: none; stroke: color-mix(in srgb, var(--accent) 65%, transparent);
  stroke-width: 1.3; stroke-linejoin: round;
}

.tf-t { fill: var(--text); }
.tf-m { fill: var(--muted); }
.tf-a { fill: var(--accent); font-weight: 600; }
.tf-on-main { fill: #ffffff; font-weight: 600; }

/* macOS のシステム設定・他アプリのウィンドウを写した部分は、テーマに追従させず
   実物と同じ配色で描く（見比べながら操作するための図なので、色まで似せる） */
.tf-os-win { fill: #28272e; stroke: #4a4854; }
.tf-os-sheet { fill: #2e2c36; stroke: #4a4854; }
.tf-os-side { fill: #211f28; }
.tf-os-row { fill: #33313c; }
.tf-os-line { stroke: #4a4854; }
.tf-os-icon { fill: none; stroke: #cfccd9; stroke-width: 1.2; }
.tf-os-t { fill: #e8e6f0; }
.tf-os-m { fill: #8f8c9e; }
.tf-toggle-on { fill: #34c759; }
.tf-tl-r { fill: #ff5f57; }
.tf-tl-y { fill: #febc2e; }
.tf-tl-g { fill: #28c840; }

/* 3D シーンのカメラ軌道と、その上に並ぶカメラ（選択中は .tf-accent） */
.tf-orbit { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.55; }
.tf-pin-off { fill: color-mix(in srgb, var(--accent) 55%, transparent); }