/* ============================================================================
 * ファイル名: theme_variables.css
 * パス: app/assets/stylesheets/theme_variables.css
 *
 * 概要: 全テーマ共通のCSS Custom Properties（カスタムプロパティ）定義。
 *       ダーク（デフォルト）・ライト・ウッドの3テーマの色・影・間隔・角丸等を管理。
 *       他のCSSファイルはここで定義された変数を参照してテーマ対応する。
 *
 * 更新日: 2026-03-16
 * リファクタリング基準（コメント行除外）:
 *   500行未満: 完璧 / 800行未満: 問題なし / 1200行未満: 要検討 / 1200行以上: 必須
 * 現在の実コード行数: 約256行 → 完璧
 *
 * セクション構成:
 *   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ファイル（この変数を参照）
 * ============================================================================ */

/* ----------------------------------------
   セクション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);

  /* 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;

  /* --- テーマシステム: セマンティックサーフェス色 ---
     用途別に意味を持つ背景色。カード・オーバーレイ・ローディング等で使用。
     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);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-card: rgba(255, 255, 255, 0.05);
  --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);
}

/* ----------------------------------------
   セクション2: ライトテーマオーバーライド
   白背景ベース。ゴールドアクセントはそのまま維持。
   surface-rgb は黒(0,0,0)に反転し、テキストも暗色系に変換。
   ---------------------------------------- */
[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);

  --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);

  --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-overlay: rgba(0, 0, 0, 0.5);
  --bg-card: rgba(255, 255, 255, 0.8);
  --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);
}

/* ----------------------------------------
   セクション3: ウッドテーマオーバーライド
   ダークウッド調: 暗い書斎・クラシックバーラウンジ風。
   背景: ダークブラウン + ダークグリーン。
   アクセント: コッパー(#c8956a) / 琥珀(#d4a87a)。
   木目テクスチャ(--wood-grain-*)を各コンポーネントの背景に適用する。
   ---------------------------------------- */
[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);

  --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);

  --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-overlay: rgba(20, 12, 6, 0.7);
  --bg-card: rgba(42, 37, 32, 0.8);
  --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);
}