/* ============================================================ WebDX static-pack テーマプリセット ------------------------------------------------------------ 使い方: のようにテーマ名を指定。レイアウトは各テンプレ（concept-*.html）が持ち、ここでは「色・雰囲気」のデザイントークンだけを上書きする。 → 同じレイアウトでも客先ごとに違う表情を出すための仕組み。トークン一覧（テンプレ側 :root が既定値を定義）: --ink / --ink-dim / --ink-rgb … 文字色（本文/補助/RGB値） --bg / --bg-2 / --bg-3 … 背景の基調 3 段階 --accent / --accent-deep … 差し色（見出し・CTA・線） --accent-bright / --accent-ink … ホバー色・アクセント上の文字色 --accent-rgb / --accent-glow-rgb … 半透明装飾・グロー用 RGB 値 --scrim-rgb … 写真上の可読性スクリム RGB 値 --pane … 単色パネル --fire-mid … 焚き火セクション中間色（暖色の闇） --serif / --sans … 書体コンセプト×テーマ相性（READMEにも記載）: - concept-worldview（世界観型）: ダーク系のみ（night-ember / forest-dawn） - concept-guide（安心型） : ライト系（morning-mist 推奨） - concept-practical（実用型） : ライト系（harbor-clear 推奨） DoD: テーマを変えたら必ず a11y-check.js（color-contrast 違反0）をそのテンプレ×テーマの組合せで再実行すること。 ============================================================ */ /* ---- 1) night-ember（夜と焚き火・琥珀）── 世界観型の既定 ---- テンプレ側 :root と同値。明示しておくことで切替デモが成立する。 */ body[data-theme="night-ember"]{ --ink:#f4efe6; --ink-dim:#cdc6b8; --ink-rgb:244,239,230; --bg:#070a0c; --bg-2:#0b1310; --bg-3:#101a22; --accent:#ff9b3d; --accent-deep:#e0641f; --accent-bright:#ffaa55; --accent-ink:#1a0f04; --accent-rgb:255,155,61; --accent-glow-rgb:255,107,31; --scrim-rgb:4,7,9; --pane:rgba(8,12,14,.86); --fire-mid:#160b05; } /* ---- 2) forest-dawn（夜明けの森・金）── 世界観型の別表情 ---- 深緑の闇に朝焼けの金。同じレイアウトで「焚き火の夜」が「夜明けの森」に変わる。緑が強い施設・高原系に。 */ body[data-theme="forest-dawn"]{ --ink:#f1f4ea; --ink-dim:#c9d2bd; --ink-rgb:241,244,234; --bg:#06100a; --bg-2:#0a1a10; --bg-3:#102218; --accent:#ffd166; --accent-deep:#d9a13b; --accent-bright:#ffe08a; --accent-ink:#1c1503; --accent-rgb:255,209,102; --accent-glow-rgb:240,180,60; --scrim-rgb:4,10,6; --pane:rgba(8,14,10,.86); --fire-mid:#141008; } /* ---- 3) morning-mist（朝霧・苔緑）── 安心型の既定（ライト） ---- ※ PR2（concept-guide）で本調整・a11y検証を行う暫定値。ダーク前提の concept-worldview には適用しないこと。 */ body[data-theme="morning-mist"]{ --ink:#26302a; --ink-dim:#55624f; --ink-rgb:38,48,42; --bg:#f7f5ef; --bg-2:#eef0e4; --bg-3:#e6ecdf; --accent:#2f6a40; --accent-deep:#24512f; --accent-bright:#3d8553; --accent-ink:#f6fbf2; --accent-rgb:47,106,64; --accent-glow-rgb:88,150,104; --scrim-rgb:247,245,239; --pane:rgba(255,255,255,.88); --fire-mid:#efe6d8; } /* ---- 4) harbor-clear（晴れた港・紺×橙）── 実用型の既定（ライト） ---- 2026-06-10 PR2 で安心型での適合性検証 → accent を #b9530a→#a04509 に暗化（bg-2上のコントラスト 4.22→4.85）。最終調整は PR3 で再検証。 */ body[data-theme="harbor-clear"]{ --ink:#1d2733; --ink-dim:#4c5a68; --ink-rgb:29,39,51; --bg:#f6f7f9; --bg-2:#eceff3; --bg-3:#e2e8ee; --accent:#a04509; --accent-deep:#7d3607; --accent-bright:#c25b18; --accent-ink:#fff7ef; --accent-rgb:160,69,9; --accent-glow-rgb:194,91,24; --scrim-rgb:246,247,249; --pane:rgba(255,255,255,.9); --fire-mid:#e9e2d6; }