/* ========================================================================== スキン (Skin) — 「見た目全体」を1軸で決める（コーラル / ネオン） - スキンは data-skin=coral|neon を に付与。data-theme(light/dark)は サーバが skin から導出（coral→light / neon→dark）して同時に付与するため、 tokens.css の light-dark() 機構はそのまま活きる（デグレ0）。 - ここでは skin ごとにアクセント系トークンだけを上書きし、ネオンは発光を足す。 - コントラスト: coral の accent は白文字/リンクで AA を満たす深めのコーラルに、 neon の accent は暗地で高コントラストな蛍光ピンク＋文字は暗インクにする。 読み込み順: tokens.css → tailwind.css → app.css → skins.css → p1.css ========================================================================== */ /* ---- コーラル（ライト基調・ポップ） ---- アクセントは白文字ボタン/リンクの両方で AA(4.5:1) を満たす深めのコーラル(#BE4A1B=5.0:1)。 アイコンPNGは明るいコーラルなので、UIの深コーラルと相まって暖かく親しみやすい配色。 */ :root[data-skin="coral"]{ --c-accent: #BE4A1B; /* 対 白文字 5.0:1・対 白背景テキスト 5.0:1 */ --c-accent-ink: #ffffff; /* primary ボタン(--grad-accent 深コーラル地)の白文字を担保。反転不可。 */ /* 淡アクセント地（ヒーロー/is-hot カード等の背景）。上に本文インク(--c-ink)が載るため テーマ追従が必須。coral は「ライト基調」だが theme.js はテーマを skin と独立に循環でき （coral×dark が起こりうる）、固定ライト値だとダークで淡ピンク地＋淡インク＝不可視になる。 → light-dark() でダーク時は暗い暖色地に。ライト値 #ffede5 は不変（既存の見た目を保持）。 */ --c-accent-soft: light-dark(#ffede5, #3a1d12); --c-accent-hover: #a8411a; --c-accent-active: #8f3714; /* テキスト色専用（暗地/明地に載る文字）。solid面用の --c-accent(#BE4A1B) は不変。 ライトは現行の深コーラル #BE4A1B（見た目不変・対 #f7f8fa 4.72:1 / #ffffff 5.02:1）。 ダークは明度を上げた明コーラル #EB7A4E で AA 達成 （対 --c-bg #0e1117 6.68:1 / --c-surface #171b22 6.11:1 / --c-surface-2 #1f242d 5.51:1）。 */ --c-accent-text: light-dark(#BE4A1B, #EB7A4E); --c-focus: #BE4A1B; --c-ring: rgba(190, 74, 27, .40); /* 主要ボタンのグラデも白文字が AA を満たす深コーラルの範囲に（両ストップ≧4.7:1）。 */ --grad-accent: linear-gradient(135deg, #c24e20 0%, #a23c14 100%); --grad-accent-hover: linear-gradient(135deg, #b0461c 0%, #923511 100%); --grad-bar: linear-gradient(90deg, #ff8a5b 0%, #ff6a3d 100%); } /* ---- ネオン（ダーク基調・発光） ---- 蛍光ピンク。暗地に対し高コントラスト。ボタン文字は暗インクにして発光ピンク上で AA を満たす。 */ :root[data-skin="neon"]{ --c-accent: #ff5c7a; --c-accent-ink: #14101a; /* 発光ピンク/シアン上で 8:1 前後。primary グラデ地の暗インクを担保。反転不可。 */ /* 淡アクセント地。neon は「ダーク基調」だがテーマ独立循環で neon×light も起こりうるため light-dark() でライト時は淡ピンク地に（暗インクが載っても可読）。ダーク値 #3a1622 は不変。 */ --c-accent-soft: light-dark(#ffe0e8, #3a1622); --c-accent-hover: #ff7a92; --c-accent-active: #ff9caf; /* テキスト色専用。solid面用の --c-accent(#ff5c7a) は不変。 ダークは現行の発光ピンク #ff5c7a（見た目不変・対 #0e1117 6.36:1 / #171b22 5.81:1）。 ライト(neon×light の独立循環時)は現行 #ff5c7a が白地 2.80:1 と AA 未達だったため、 テキスト用途のみ濃ピンク #C2185B に是正（対 #f7f8fa 5.53:1 / #ffffff 5.87:1）。 ※ neon の既定テーマ=ダークの見た目は不変。solid面/グラデ/ボタンにも影響しない。 */ --c-accent-text: light-dark(#C2185B, #ff5c7a); --c-focus: #3ae0ff; --c-ring: rgba(58, 224, 255, .45); /* 主要ボタンは明るいピンク→シアンのネオングラデ＋暗インク（アイコンと同系）。 */ --grad-accent: linear-gradient(135deg, #ff5c7a 0%, #3ae0ff 100%); --grad-accent-hover: linear-gradient(135deg, #ff789a 0%, #6ae8ff 100%); --grad-bar: linear-gradient(90deg, #ff5c7a 0%, #3ae0ff 100%); } /* ネオンの発光アクセント（限定的に：主要ボタン・アップグレードピル・ブランド） */ :root[data-skin="neon"] .vg-btn--primary{ box-shadow: 0 0 18px rgba(255, 92, 122, .35), 0 6px 18px rgba(0,0,0,.45); } :root[data-skin="neon"] .vg-btn--primary:hover{ box-shadow: 0 0 26px rgba(255, 92, 122, .5), 0 6px 20px rgba(0,0,0,.5); } :root[data-skin="neon"] .vg-upgrade-pill{ box-shadow: 0 0 14px rgba(58, 224, 255, .35); } /* 機能アイコンのグロー: PNG 側に発光は焼き込み済みなので控えめに補強するだけ。 旧 [data-theme="dark"] .vg-feat-ico(青グロー) は app.css 側で skin 対応に置換済み。 */ :root[data-skin="neon"] .vg-feat-ico{ filter: drop-shadow(0 0 3px rgba(255, 92, 122, .45)); } :root[data-skin="coral"] .vg-feat-ico{ filter: drop-shadow(0 0 1px rgba(40, 20, 10, .28)); } /* スキン切替トグル（トップバー）: 現在スキンの点を強調 */ .vg-skin-toggle{ position:relative; } .vg-skin-toggle .vg-skin-dot{ display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid var(--c-border); } :root[data-skin="coral"] .vg-skin-toggle .vg-skin-dot{ background:#ff6a3d; border-color:#ff6a3d; } :root[data-skin="neon"] .vg-skin-toggle .vg-skin-dot{ background:#ff5c7a; border-color:#3ae0ff; box-shadow:0 0 8px rgba(255,92,122,.7); } /* 言語スイッチャ（トップバー）: 🌐 アイコン＋コンパクトなネイティブ