/* ============================================================================ * ファイル名: theme_variables.css * パス: app/assets/stylesheets/theme_variables.css * * 概要: 全テーマ共通のCSS Custom Properties（カスタムプロパティ）定義。 * ダーク（デフォルト）・ライト・ウッドの3テーマの色・影・間隔・角丸等を管理。 * 他のCSSファイルはここで定義された変数を参照してテーマ対応する。 * * 更新日: 2026-05-31（Phase F-0: テーマ追従ゴールド文字色変数 --lx-gold-text を 3 テーマに追加） * * 【リファクタリング基準】（コメント行は行数カウントから除外） * CSS ファイルの判定基準: * 1. 500行未満 → 完璧 * 2. 800行未満 → 問題なし ← 現在ここ * 3. 1200行未満 → 注意喚起。リファクタリング要検討 * 4. 1200行以上 → リファクタリング必須 * * 推定実コード行数: 約424行（2026-05-28 計測・コメント除外） * 物理行数: 約646行（コメント含む。判定はコメント除外値で行うこと） * 判定: ✅ 完璧（実コード 500行未満） * 注: 500行（問題なしボーダー）に近づいているため次回追加時はトークン整理を検討。 * 800行（注意喚起）到達前にテーマ別 override セクションを theme_light.css / * theme_wood.css へ抽出することを検討する。 * * 【更新履歴（直近2世代）】 * 2026-05-31: Phase F-0 — テーマ追従ゴールド文字色変数 --lx-gold-text を 3 テーマに追加。 * Light で --gold-primary を文字色に使うと白背景に 1.33:1 で WCAG FAIL する問題の * 実装上の担保（Dark #FFD700 / Light #b45309=gold-700 / Wood #c8956a=copper）。 * 2026-05-28: 換金 UI テーマトークン化に伴う 4 種 × 3 mode = 12 トークン追加 * - --color-warning-rgb / --color-info-rgb（pending / approved バッジの rgba 背景） * - --text-on-gold（金グラデーション上のテキスト色 — dark/light は黒、wood は濃茶） * - --bg-elevated（ドロップダウン等の浮き上がりサーフェス背景 — 各モードで適切な濃淡） * * 色設計思想（3テーマ共通原則）: * - 各テーマのセマンティック色（success/warning/danger）は背景色との * コントラスト比 WCAG AA 以上を確保する方針で選定。 * - ダーク: 明るい色（#22c55e, #eab308, #ef4444）で暗い背景に映える * - ライト: 暗めの色（#16a34a, #ca8a04, #dc2626）で白背景に対して可読性確保 * - ウッド: 自然パレット調和色（#2d8659, #d4a87a, #c0392b）で統一感維持 * * セクション構成: * 1. :root（ダークテーマデフォルト） * - 基本色相（HSLカラーシステム） * - グラスモーフィズム変数（半透明背景・ボーダー） * - シャドウ（sm〜2xl の5段階）/ スペーシング（xs〜2xl の6段階）/ 角丸 * - ゴールドテーマシステム（50〜700のカラースケール + グラデーション + ボーダー） * - テーマシステム（背景色・テキスト色・サーフェス色・スクロールバー・チャート色） * 2. [data-theme="light"]（ライトテーマ上書き） * - 白背景系に反転、ゴールド→ブラウンゴールドに変換 * 3. [data-theme="wood"]（ウッドテーマ上書き） * - ダークブラウン背景、コッパーアクセント、木目テクスチャ変数 * * 関連ファイル: * - app/assets/stylesheets/application.css（分割元） * - 全てのCSS/SCSSファイル（この変数を参照） * * 変更履歴: * 2026-04-29: ハードコード共通化（notifications.css の .notification-type-slot で * 使用するバッジ用変数 3 種を追加: --badge-text-on-cap-gradient / * --badge-text-shadow-on-cap-gradient / --badge-fallback-gradient）。 * value は3テーマ共通のため :root のみで定義（cap グラデ背景上の白文字は * 3テーマで一貫した設計）。既存 .luxury-status-personality-badge は * 同様のハードコードを使用しているが、勝手に既存機能修正禁止ルール厳守の * ため新規追加コード（タイプ変化通知バッジ）のみ variable 化。 * 2026-04-23: ハードコード共通化による3テーマ対応強化（tutorial.css / faq.css の * ハードコードカラーをテーマ変数化する目的で変数を 4 種追加）。 * ダーク値は既存ハードコード値と完全一致（ピクセル変更なし）、 * ライト／ウッドは適切な代替色を新規提供。 * 追加変数: --color-success-darker / --gold-accent-rgb / * --updated-badge-bg-rgb / --updated-badge-text * 利用先: tutorial.css L250 (progress-fill gradient), L148/202/324/463/518/706/712 * (gold gradients), L311/315/384-386 (updated badge) * および faq.css L107/109/177/188/195/240/246/247 は既存 * --gold-primary-rgb に置換。 * 2026-03-24: セマンティック警告色(--color-warning)追加、bg-surface-elevated追加 * 2026-04-02: セマンティック危険色(--color-danger)追加 * 2026-04-09: セマンティック成功色(--color-success)追加（3テーマ対応）、 * 色設計思想コメント補完 * 2026-04-15: セマンティック情報色(--color-info)追加（3テーマ対応: ダーク#6366f1/ライト#4f46e5/ウッド#7a8bb5） * 2026-04-22: チュートリアル動画メディア背景変数（--tutorial-media-bg）を追加（3テーマ対応） * ダーク #000 / ライト #f0f0f0 / ウッド #1a0e00。 * tutorial.css の .tutorial-step-video から参照。 * ダークモード既存値（#000）は変更せず変数化のみ、見た目は完全一致。 * 2026-04-23: --color-danger の RGB 分解変数（--color-danger-rgb）を3テーマ対応で追加。 * 既存の --color-danger と同値（ダーク#ef4444=239,68,68 / ライト#dc2626=220,38,38 / * ウッド#c0392b=192,57,43）。home_widgets.css の .widget-login-item.anomalous 背景 * (rgba(var(--color-danger-rgb), 0.06)) 用。パターンは --color-success-rgb に準拠。 * 2026-04-22: --color-success の RGB 分解変数（--color-success-rgb）を3テーマ対応で追加。 * 既存の --color-success と同値（ダーク#22c55e=34,197,94 / ライト#16a34a=22,163,74 / * ウッド#2d8659=45,134,89）。tutorial.css 等で rgba(var(--color-success-rgb), α) の * 形で透明度付き成功色を使用可能にする。既存色は1pxも変更せず。 * 2026-04-18: モバイル viewport 対応の safe-area CSS 変数を追加 * （--safe-area-top/bottom/left/right = env(safe-area-inset-*, 0px)） * → iOS ノッチ・Android ジェスチャーバー・動的アドレスバー対策。 * 各コンポーネントから var(--safe-area-*) として参照可能にする。 * viewport-fit=cover（全 layout の meta viewport）が設定されて * いる画面で有効化される。 * ============================================================================ */ /* ---------------------------------------- セクション1: ダークテーマ（デフォルト） :root に定義された値がダークテーマの基準値となる。 ライト/ウッドテーマは下部の [data-theme] セレクタで上書きする。 ---------------------------------------- */ /* CSS Custom Properties for Theme */ :root { /* --- 基本色相（HSLカラーシステム用） --- */ --primary-hue: 240; --secondary-hue: 300; --accent-hue: 180; --success-hue: 120; --warning-hue: 45; --danger-hue: 0; /* Color System */ --primary: hsl(var(--primary-hue), 100%, 67%); --primary-light: hsl(var(--primary-hue), 100%, 80%); --primary-dark: hsl(var(--primary-hue), 100%, 50%); --secondary: hsl(var(--secondary-hue), 100%, 67%); --accent: hsl(var(--accent-hue), 100%, 67%); /* Glass Morphism */ --glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Dark Glass */ --dark-glass-bg: rgba(0, 0, 0, 0.15); --dark-glass-border: rgba(255, 255, 255, 0.08); /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* --- ゴールドテーマシステム（2026-01-18追加） --- WeProcessのブランドカラー。段階的な濃度で使い分ける。 50-100: 薄い背景用 / 300-400: ボタン・バッジ用 / 600-700: テキスト・ボーダー用 */ --gold-50: #fffbeb; --gold-100: #fef3c7; --gold-200: #fde68a; --gold-300: #fcd34d; --gold-400: #fbbf24; --gold-500: #f59e0b; --gold-600: #d97706; --gold-700: #b45309; /* Gold Gradients */ --gold-gradient-primary: linear-gradient(135deg, #fbbf24, #f59e0b); --gold-gradient-secondary: linear-gradient(135deg, #f59e0b, #d97706); --gold-gradient-light: linear-gradient(135deg, #fcd34d, #fbbf24); /* Gold Borders */ --gold-border-subtle: rgba(251, 191, 36, 0.15); --gold-border-light: rgba(251, 191, 36, 0.25); --gold-border-medium: rgba(251, 191, 36, 0.4); --gold-glow: 0 0 20px rgba(251, 191, 36, 0.3); /* --- テーマシステム: 背景色 --- ダークテーマでは黒系のグラデーション。 bg-primary(最も暗い) → bg-secondary → bg-tertiary(最も明るい) */ --bg-primary: #0a0a0a; --bg-secondary: #1a1a1a; --bg-tertiary: #2a2a2a; --bg-primary-rgb: 10, 10, 10; --bg-secondary-rgb: 26, 26, 26; --bg-tertiary-rgb: 42, 42, 42; /* --- テーマシステム: テキスト色 --- primary: メインテキスト / secondary: 補助テキスト tertiary: 三次テキスト / muted: 最も薄いテキスト（プレースホルダー等） */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-tertiary: rgba(255, 255, 255, 0.5); --text-muted: rgba(255, 255, 255, 0.4); --text-primary-rgb: 255, 255, 255; /* --- テーマシステム: サーフェス/ボーダー --- surface-rgb: ダーク=白(255,255,255) / ライト=黒(0,0,0) / ウッド=コッパー(200,149,106) 他のCSSファイルで rgba(var(--surface-rgb), 0.08) のように使用される */ --surface-rgb: 255, 255, 255; --border-primary: rgba(255, 255, 255, 0.15); --border-secondary: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.05); /* --- テーマシステム: プログレスバー軌道（track）背景 --- 2026-05-20 追加。子課題完了率プログレスバー等の「fill 前の空きトラック」色を共通化。 surface-rgb と異なり、コントラスト確保のためテーマごとに opacity も微調整する */ --progress-track-bg: rgba(255, 255, 255, 0.08); /* Theme System - Shadow */ --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-glow: 0 8px 25px rgba(255, 255, 255, 0.1); --shadow-glow-sm: 0 4px 15px rgba(255, 255, 255, 0.1); /* --- テーマシステム: ゴールドアクセント（ブランドカラー） --- ダーク: ゴールド #FFD700 / #FFA500 ライト: 同じ値だが、[data-theme="light"]では上書きされない ウッド: コッパー #c8956a / #d4a87a に上書きされる */ --gold-primary: #FFD700; --gold-secondary: #FFA500; --gold-primary-rgb: 255, 215, 0; --gold-secondary-rgb: 255, 165, 0; /* 2026-05-31 追加 (Phase F-0): テーマ追従する「ゴールド文字色」専用変数。 Phase A §7.1 / 02-tokens.md §7 で確定した「Light テーマで --gold-primary を文字色に 使うのは禁止（白背景に 1.33:1 で WCAG FAIL）→ gold-700 を使う」を実装上で担保する。 Dark : #FFD700（--gold-primary そのまま・継承） Light: #b45309（gold-700 / 白背景に 4.76:1 で AA pass）← [data-theme="light"] で上書き Wood : #c8956a（コッパー）← [data-theme="wood"] で --gold-primary 経由 background / border には引き続き --gold-primary を直接使うため、文字色のときだけ使う。 */ --lx-gold-text: var(--gold-primary, #FFD700); /* --- テーマシステム: セマンティックサーフェス色 --- 用途別に意味を持つ背景色。カード・オーバーレイ・ローディング等で使用。 bg-surface: 通常 / bg-surface-hover: ホバー時 / bg-surface-active: アクティブ時 */ --bg-surface: rgba(255, 255, 255, 0.05); --bg-surface-hover: rgba(255, 255, 255, 0.08); --bg-surface-active: rgba(255, 255, 255, 0.12); /* ツールチップやポップオーバー等の浮き上がり要素の背景色（2026-03-24追加） bg-surfaceよりも不透明度が高く、下層コンテンツを覆い隠す。 プラン比較ツールチップ等で使用。 */ --bg-surface-elevated: rgba(30, 30, 30, 0.98); --bg-overlay: rgba(0, 0, 0, 0.7); --bg-card: rgba(255, 255, 255, 0.05); /* セマンティック成功色（2026-04-09追加） プログレスバー（正常範囲）等に使用。 ダーク: #22c55e（明るいグリーン、暗い背景に対して高コントラスト） */ --color-success: #22c55e; /* 2026-04-22 追加: --color-success の RGB 分解（rgba() の透明度付き利用用）。 ダーク #22c55e の RGB = 34, 197, 94。 使用例: rgba(var(--color-success-rgb), 0.15) */ --color-success-rgb: 34, 197, 94; /* セマンティック警告色（2026-03-24追加） いいね失効予告等の注意喚起テキストに使用。 テーマごとに背景色とのコントラスト比を確保。 ダーク: #eab308（明るいアンバー、暗い背景に対して高コントラスト） */ --color-warning: #eab308; /* 2026-05-28 追加: --color-warning の RGB 分解（rgba() の透明度付き利用用）。 ダーク #eab308 の RGB = 234, 179, 8。 使用例: rgba(var(--color-warning-rgb), 0.15) — 換金申請の pending バッジ背景。 パターンは --color-success-rgb / --color-danger-rgb に準拠。 */ --color-warning-rgb: 234, 179, 8; /* セマンティック危険色（2026-04-02追加） 通知バッジ等の緊急・未読表示に使用。 ダーク: #ef4444（明るい赤、暗い背景に対して高コントラスト） */ --color-danger: #ef4444; /* 2026-04-23 追加: --color-danger の RGB 分解（rgba() の透明度付き利用用）。 ダーク #ef4444 の RGB = 239, 68, 68。 使用例: rgba(var(--color-danger-rgb), 0.06) — 異常判定ログイン等の薄い警告背景。 パターンは --color-success-rgb (2026-04-22 追加) に準拠。 */ --color-danger-rgb: 239, 68, 68; /* セマンティック情報色（2026-04-15追加） プランステータスのプログレスバー等に使用。 ダーク: #6366f1（明るいインディゴ、暗い背景に対して高コントラスト） */ --color-info: #6366f1; /* 2026-05-28 追加: --color-info の RGB 分解（rgba() の透明度付き利用用）。 ダーク #6366f1 の RGB = 99, 102, 241。 使用例: rgba(var(--color-info-rgb), 0.15) — 換金申請の approved バッジ背景。 */ --color-info-rgb: 99, 102, 241; /* 2026-05-28 追加: 金グラデーション（--gold-primary → --gold-secondary）の上に重ねる テキスト色。dark/light は黒固定（金は両モードで明色のため）、wood は深い濃茶で 金との対比を確保。換金 UI の「Stripe アカウントを連携」ボタン等で使用。 */ --text-on-gold: #000000; /* 2026-05-28 追加: 浮き上がったサーフェス（ドロップダウン・ポップオーバー等）の背景。 dark: #1f1f1f（標準より少し明るい elevated）/ light: 白に微薄影 / wood: 深い濃茶。 換金 UI の Stripe メニュードロップダウンで使用。 */ --bg-elevated: #1f1f1f; --bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%); --loading-bg: rgba(0, 0, 0, 0.7); --loading-content-bg: rgba(30, 30, 30, 0.95); /* Theme System - Scrollbar */ --scrollbar-track: rgba(255, 255, 255, 0.1); --scrollbar-thumb: rgba(255, 255, 255, 0.3); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5); /* Chart Colors */ --chart-line-color: rgba(139, 92, 246, 1); --chart-line-bg: rgba(139, 92, 246, 0.1); --chart-pie-1: rgba(139, 92, 246, 0.8); --chart-pie-2: rgba(236, 72, 153, 0.8); --chart-pie-3: rgba(249, 115, 22, 0.8); --chart-pie-4: rgba(34, 197, 94, 0.8); /* --- Safe Area Insets (2026-04-18追加) --- iOS ノッチ・Android ジェスチャーバー・動的アドレスバー対策。 env(safe-area-inset-*) の値をCSS変数化して、全コンポーネントから var(--safe-area-*) として参照できるようにする。未対応端末は 0px を返す。 使用例: padding-bottom: var(--safe-area-bottom); viewport-fit=cover (meta viewport) が設定されているページで有効化される。 */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* --- メディア背景色（チュートリアル動画・将来の画像プレビューで利用） --- 2026-04-22 追加: app/views/app/tutorials/show.html.erb の .tutorial-step-video で使用。動画が 16:9 で max-height: 45vh にcontain表示される際、 ビューポート内に生じる空白領域の背景色。 ダーク: #000（完全黒、動画フレームを際立たせる） ライト: #f0f0f0（淡いグレー、白背景と調和） ウッド: #1a0e00（濃いマホガニー、木目背景と統一） */ --tutorial-media-bg: #000; /* --- 2026-04-23 追加: ハードコード共通化による3テーマ対応強化 --- tutorial.css / faq.css でハードコードされていた「成功色ペア」「ゴールド アクセント」「updated バッジ色」をテーマ変数化。ダークテーマの値は 既存ハードコード値と完全一致させピクセル単位で変更なし。ライト／ウッド テーマはテーマパレット整合のために適切な代替色を提供する。 */ /* プログレスバー complete 状態のグラデーション2色目 （1色目は --color-success, 2色目は --color-success-darker）。 ダーク: #16a34a（既存ハードコード値そのまま） */ --color-success-darker: #16a34a; /* ゴールド系アクセント（amber-400 #ffc107 相当）。 tutorial.css で --gold-primary-rgb とペアを組むグラデーション2色目に使用。 既存の --gold-secondary-rgb（#FFA500=255,165,0）とは別系統（amber寄り）。 ダーク: 255, 193, 7 = #ffc107（既存ハードコード値そのまま） */ --gold-accent-rgb: 255, 193, 7; /* "updated" バッジ系（tutorial-chapter-card.updated / tutorial-chapter-badge.updated） チャプター更新再通知のためのブルーアクセント。 ダーク: 既存ハードコード値完全保持 */ --updated-badge-bg-rgb: 59, 130, 246; /* blue-500 相当 */ --updated-badge-text: #60a5fa; /* blue-400 相当 */ /* --- 2026-04-29 追加: パーソナリティタイプバッジ（cap グラデ上に乗る円形バッジ）用 --- 用途: notifications.css の .notification-type-slot （タイプ変化通知の旧→新バッジ視覚化）。 value は3テーマ共通（cap グラデ背景上の白文字は3テーマで一貫した設計）のため light/wood テーマブロックでの override は不要。継承で意図通り効く。 ※ 既存 .luxury-status-personality-badge は同パターンを直接ハードコードで使用しており、 勝手に修正しないルール厳守のため touch せず（新規追加コードのみ variable 化）。 */ --badge-text-on-cap-gradient: #ffffff; --badge-text-shadow-on-cap-gradient: 0 1px 2px rgba(0, 0, 0, 0.25); --badge-fallback-gradient: linear-gradient(135deg, #6366f1, #8b5cf6); } /* ---------------------------------------- セクション2: ライトテーマオーバーライド 白背景ベース。ゴールドアクセントはそのまま維持。 surface-rgb は黒(0,0,0)に反転し、テキストも暗色系に変換。 色設計思想: - 背景が白系(#f8f9fa)のため、テキスト・ボーダー・影はすべて暗色方向に反転。 - ゴールドRGB値はコントラスト確保のため暗めのブラウンゴールドに上書き。 - セマンティック色（success/warning/danger）は暗めのトーンでWCAG AA準拠。 ---------------------------------------- */ [data-theme="light"] { --bg-primary: #f8f9fa; --bg-secondary: #f0f0f5; --bg-tertiary: #e8e8ed; --bg-primary-rgb: 248, 249, 250; --bg-secondary-rgb: 240, 240, 245; --bg-tertiary-rgb: 232, 232, 237; --text-primary: #1a1a2e; --text-secondary: rgba(26, 26, 46, 0.7); --text-tertiary: rgba(26, 26, 46, 0.5); --text-muted: rgba(26, 26, 46, 0.4); --text-primary-rgb: 26, 26, 46; --surface-rgb: 0, 0, 0; --border-primary: rgba(0, 0, 0, 0.12); --border-secondary: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.04); /* プログレスバー軌道: ライトは白背景上で目立たせるため opacity を上げる */ --progress-track-bg: rgba(0, 0, 0, 0.15); --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(0, 0, 0, 0.1); --dark-glass-bg: rgba(0, 0, 0, 0.04); --dark-glass-border: rgba(0, 0, 0, 0.08); --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08); --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-glow: 0 8px 25px rgba(0, 0, 0, 0.08); --shadow-glow-sm: 0 4px 15px rgba(0, 0, 0, 0.06); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.06); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.1); /* --- ゴールドアクセント（ライトモード用） --- 2026-03-15追加 / 2026-03-16コメント補足 【なぜライトモードでは暗めのゴールドを使うのか】 白背景(#f8f9fa)に対してダークテーマのゴールド(#FFD700 = 255,215,0)を使うと コントラスト比が低すぎて視認性が悪い。そのため、暗めの茶金を使う。 - --gold-primary-rgb: 180,83,9 = gold-700(#b45309) のRGB分解値 - --gold-secondary-rgb: 217,119,6 = gold-600(#d97706) のRGB分解値 【--gold-primary / --gold-secondary との違い】 - --gold-primary / --gold-secondary はソリッドカラー（不透明色）。 ボタン背景やテキスト色など、透明度が不要な箇所で使用。 ライトモードでも #FFD700 / #FFA500 のまま（上書きしない）。 - --gold-primary-rgb / --gold-secondary-rgb は rgba() 関数用のRGB成分のみ。 rgba(var(--gold-primary-rgb), 0.2) のように透明度付きで使用する。 ライトモードでは暗めの値に上書きすることでコントラストを確保する。 */ --gold-primary-rgb: 180, 83, 9; --gold-secondary-rgb: 217, 119, 6; --gold-border-subtle: rgba(180, 83, 9, 0.15); --gold-border-light: rgba(180, 83, 9, 0.25); --gold-border-medium: rgba(180, 83, 9, 0.4); --gold-glow: 0 0 20px rgba(180, 83, 9, 0.15); /* 2026-05-31 追加 (Phase F-0): ゴールド文字色をライト用 gold-700 (#b45309) に上書き。 白背景に 4.76:1 で WCAG AA pass（--gold-primary #FFD700 は 1.33:1 で FAIL のため）。 */ --lx-gold-text: #b45309; --bg-surface: rgba(0, 0, 0, 0.03); --bg-surface-hover: rgba(0, 0, 0, 0.06); --bg-surface-active: rgba(0, 0, 0, 0.09); /* 浮き上がり要素の背景色（白系、bg-primaryに近い不透明度） */ --bg-surface-elevated: rgba(255, 255, 255, 0.98); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-card: rgba(255, 255, 255, 0.8); /* 成功色（暗めのグリーン、白背景に対してWCAG AA以上のコントラスト比を確保） */ --color-success: #16a34a; /* 2026-04-22 追加: --color-success のライトテーマ RGB 分解（#16a34a = 22, 163, 74） */ --color-success-rgb: 22, 163, 74; /* 警告色（暗めのアンバー、白背景に対してWCAG AA以上のコントラスト比を確保） */ --color-warning: #ca8a04; /* 2026-05-28 追加: --color-warning のライトテーマ RGB 分解（#ca8a04 = 202, 138, 4） */ --color-warning-rgb: 202, 138, 4; /* 危険色（暗めの赤、白背景に対してWCAG AA以上のコントラスト比を確保） */ --color-danger: #dc2626; /* 2026-04-23 追加: --color-danger のライトテーマ RGB 分解（#dc2626 = 220, 38, 38） */ --color-danger-rgb: 220, 38, 38; /* 情報色（暗めのインディゴ、白背景に対してWCAG AA以上のコントラスト比を確保） */ --color-info: #4f46e5; /* 2026-05-28 追加: --color-info のライトテーマ RGB 分解（#4f46e5 = 79, 70, 229） */ --color-info-rgb: 79, 70, 229; /* 2026-05-28 追加: 金グラデ上のテキスト色。ライトでも金は明色なので黒を維持 */ --text-on-gold: #000000; /* 2026-05-28 追加: 浮き上がりサーフェス背景。ライトは白に微薄影で立体感を出す */ --bg-elevated: #ffffff; --bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #f0f0f5 50%, #e8e8ed 100%); --loading-bg: rgba(255, 255, 255, 0.7); --loading-content-bg: rgba(255, 255, 255, 0.95); --scrollbar-track: rgba(0, 0, 0, 0.05); --scrollbar-thumb: rgba(0, 0, 0, 0.2); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.35); --chart-line-color: rgba(109, 40, 217, 1); --chart-line-bg: rgba(109, 40, 217, 0.1); --chart-pie-1: rgba(109, 40, 217, 0.8); --chart-pie-2: rgba(219, 39, 119, 0.8); --chart-pie-3: rgba(234, 88, 12, 0.8); --chart-pie-4: rgba(22, 163, 74, 0.8); /* 2026-04-22 追加: チュートリアル動画メディア背景（ライト上書き） */ --tutorial-media-bg: #f0f0f0; /* 2026-04-23 追加: ハードコード共通化による3テーマ対応強化（ライト上書き） 白背景に対して適切なコントラストを持つ暗色方向に調整 */ --color-success-darker: #15803d; /* green-700、ライト success #16a34a に対する濃色ペア */ --gold-accent-rgb: 217, 119, 6; /* amber-600 #d97706、ライトゴールド #b45309 に対する暖色アクセント */ --updated-badge-bg-rgb: 37, 99, 235; /* blue-600、白背景に対するコントラスト確保 */ --updated-badge-text: #1d4ed8; /* blue-700、同上 */ } /* ---------------------------------------- セクション3: ウッドテーマオーバーライド ダークウッド調: 暗い書斎・クラシックバーラウンジ風。 背景: ダークブラウン + ダークグリーン。 アクセント: コッパー(#c8956a) / 琥珀(#d4a87a)。 木目テクスチャ(--wood-grain-*)を各コンポーネントの背景に適用する。 色設計思想: - ダークブラウン背景(#1a1a18)に対し、コッパー系の暖色アクセントで統一。 - ゴールド → コッパー(#c8956a)に変換し、木の質感と調和。 - セマンティック色は自然パレット（フォレストグリーン・コッパートーン・暖色赤）で ウッドテーマ全体のトーンを崩さないよう選定。 ---------------------------------------- */ [data-theme="wood"] { --bg-primary: #1a1a18; --bg-secondary: #1e2a24; --bg-tertiary: #2a2520; --bg-primary-rgb: 26, 26, 24; --bg-secondary-rgb: 30, 42, 36; --bg-tertiary-rgb: 42, 37, 32; --text-primary: #e8dcc8; --text-secondary: rgba(232, 220, 200, 0.7); --text-tertiary: rgba(232, 220, 200, 0.45); --text-muted: rgba(232, 220, 200, 0.35); --text-primary-rgb: 232, 220, 200; --surface-rgb: 200, 149, 106; --border-primary: #3a3228; --border-secondary: #2e2822; --border-subtle: rgba(200, 149, 106, 0.08); /* プログレスバー軌道: ウッド調木目背景に映える暖色クリーム */ --progress-track-bg: rgba(232, 220, 200, 0.1); --glass-bg: rgba(42, 37, 32, 0.6); --glass-border: rgba(200, 149, 106, 0.12); --dark-glass-bg: rgba(26, 26, 24, 0.3); --dark-glass-border: rgba(200, 149, 106, 0.08); --shadow-card: 0 2px 8px rgba(20, 12, 6, 0.4); --shadow-elevated: 0 4px 16px rgba(20, 12, 6, 0.5); --shadow-glow: 0 8px 25px rgba(200, 149, 106, 0.15); --shadow-glow-sm: 0 4px 15px rgba(200, 149, 106, 0.1); --shadow-sm: 0 2px 8px rgba(20, 12, 6, 0.4); --shadow-md: 0 4px 16px rgba(20, 12, 6, 0.5); --shadow-lg: 0 8px 32px rgba(20, 12, 6, 0.6); --shadow-xl: 0 20px 25px rgba(20, 12, 6, 0.5); --shadow-2xl: 0 25px 50px rgba(20, 12, 6, 0.6); --gold-primary: #c8956a; --gold-secondary: #d4a87a; --gold-primary-rgb: 200, 149, 106; --gold-secondary-rgb: 212, 168, 122; --gold-border-subtle: rgba(200, 149, 106, 0.15); --gold-border-light: rgba(200, 149, 106, 0.25); --gold-border-medium: rgba(200, 149, 106, 0.4); --gold-glow: 0 0 20px rgba(200, 149, 106, 0.25); /* 2026-05-31 追加 (Phase F-0): ゴールド文字色。ウッドは --gold-primary（コッパー #c8956a）が 暗背景に 6.61:1 で AA pass のためそのまま使う。 */ --lx-gold-text: var(--gold-primary, #c8956a); --bg-surface: rgba(200, 149, 106, 0.05); --bg-surface-hover: rgba(200, 149, 106, 0.08); --bg-surface-active: rgba(200, 149, 106, 0.12); /* 浮き上がり要素の背景色（ダークブラウン、書斎の重厚感を維持） */ --bg-surface-elevated: rgba(42, 37, 32, 0.98); --bg-overlay: rgba(20, 12, 6, 0.7); --bg-card: rgba(42, 37, 32, 0.8); /* 成功色（フォレストグリーン、ウッドテーマの自然パレットに調和） */ --color-success: #2d8659; /* 2026-04-22 追加: --color-success のウッドテーマ RGB 分解（#2d8659 = 45, 134, 89） */ --color-success-rgb: 45, 134, 89; /* 警告色（コッパートーン、ウッドテーマの暖色パレットに調和） */ --color-warning: #d4a87a; /* 2026-05-28 追加: --color-warning のウッドテーマ RGB 分解（#d4a87a = 212, 168, 122） */ --color-warning-rgb: 212, 168, 122; /* 危険色（暖色寄りの赤、ウッドテーマのパレットに調和） */ --color-danger: #c0392b; /* 2026-04-23 追加: --color-danger のウッドテーマ RGB 分解（#c0392b = 192, 57, 43） */ --color-danger-rgb: 192, 57, 43; /* 情報色（ラベンダー、ウッドテーマの落ち着いたパレットに調和） */ --color-info: #7a8bb5; /* 2026-05-28 追加: --color-info のウッドテーマ RGB 分解（#7a8bb5 = 122, 139, 181） */ --color-info-rgb: 122, 139, 181; /* 2026-05-28 追加: 金グラデ（ウッドは #c8956a 系のブロンズ寄り）上のテキスト色。 ウッドの金は明度が低めなので、暗いオフブラウンで対比を取る */ --text-on-gold: #1a1a18; /* 2026-05-28 追加: 浮き上がりサーフェス背景。ウッドは深い濃茶で書斎の重厚感を維持 */ --bg-elevated: #2a2520; --bg-gradient: linear-gradient(135deg, #1a1a18 0%, #1e2a24 50%, #2a2520 100%); --loading-bg: rgba(26, 26, 24, 0.7); --loading-content-bg: rgba(42, 37, 32, 0.95); --scrollbar-track: rgba(200, 149, 106, 0.1); --scrollbar-thumb: rgba(200, 149, 106, 0.3); --scrollbar-thumb-hover: rgba(200, 149, 106, 0.5); /* --- 木目テクスチャ --- CSS repeating-linear-gradient で木の年輪風パターンを再現。 main: 全体背景用（最も濃い）/ card: カード背景用 sidebar: サイドバー用 / subtle: 控えめなアクセント用 */ --wood-grain-main: repeating-linear-gradient( 85deg, rgba(200, 149, 106, 0.04) 0px, transparent 2px, transparent 6px ), repeating-linear-gradient( 82deg, rgba(200, 149, 106, 0.025) 0px, transparent 1px, transparent 10px ), repeating-linear-gradient( 78deg, rgba(200, 149, 106, 0.015) 0px, transparent 1px, transparent 20px ); --wood-grain-card: repeating-linear-gradient( 83deg, rgba(200, 149, 106, 0.03) 0px, transparent 1px, transparent 5px ), radial-gradient( ellipse at 70% 30%, rgba(200, 149, 106, 0.05) 0%, transparent 50% ); --wood-grain-sidebar: repeating-linear-gradient( 88deg, rgba(200, 149, 106, 0.03) 0px, transparent 1px, transparent 4px ), radial-gradient( ellipse at 30% 70%, rgba(200, 149, 106, 0.07) 0%, transparent 60% ); --wood-grain-subtle: repeating-linear-gradient( 85deg, rgba(200, 149, 106, 0.025) 0px, transparent 1px, transparent 7px ), repeating-linear-gradient( 80deg, rgba(200, 149, 106, 0.015) 0px, transparent 1px, transparent 15px ); --wood-border-gradient: linear-gradient(90deg, #3a2820, #c8956a, #5a3d2e, #d4a87a, #5a3d2e, #c8956a, #3a2820); --wood-divider-gradient: linear-gradient(90deg, transparent, rgba(200, 149, 106, 0.15), transparent); --chart-line-color: rgba(200, 149, 106, 1); --chart-line-bg: rgba(200, 149, 106, 0.1); --chart-pie-1: rgba(200, 149, 106, 0.8); --chart-pie-2: rgba(212, 168, 122, 0.8); --chart-pie-3: rgba(168, 115, 78, 0.8); --chart-pie-4: rgba(139, 92, 60, 0.8); /* 2026-04-22 追加: チュートリアル動画メディア背景（ウッド上書き） */ --tutorial-media-bg: #1a0e00; /* 2026-04-23 追加: ハードコード共通化による3テーマ対応強化（ウッド上書き） ダークブラウン背景に対して自然パレットで調和するアクセント色を選定 */ --color-success-darker: #1e5f40; /* ディープフォレスト、ウッド success #2d8659 に対する濃色ペア */ --gold-accent-rgb: 212, 168, 122; /* #d4a87a 琥珀、ウッド gold-secondary と同系統 */ --updated-badge-bg-rgb: 122, 139, 181; /* ウッド color-info #7a8bb5 と同値、自然色パレット整合 */ --updated-badge-text: #7a8bb5; /* 同上、ウッドの青系アクセント統一 */ }