/**
 * CSS変数定義
 * サイトごとにカスタマイズ可能
 * @module neuvecom-common/css/variables
 */

:root {
  /* ========================================
     クイズ用変数
     ======================================== */

  /* 基本色（ライトテーマ） */
  --quiz-bg: #f9fafb;
  --quiz-border: #e5e7eb;
  --quiz-text: #374151;
  --quiz-label: #6b7280;

  /* 基本色（ダークテーマ） */
  --quiz-bg-dark: #1f2937;
  --quiz-border-dark: #374151;
  --quiz-text-dark: #e5e7eb;
  --quiz-label-dark: #9ca3af;

  /* 選択肢 */
  --quiz-option-bg: white;
  --quiz-option-border: #d1d5db;
  --quiz-option-bg-dark: #374151;
  --quiz-option-border-dark: #4b5563;
  --quiz-option-hover-dark: #1f2937;

  /* プライマリ色 */
  --quiz-primary: #3b82f6;
  --quiz-primary-hover: #2563eb;
  --quiz-primary-light: #eff6ff;
  --quiz-primary-dark: #60a5fa;
  --quiz-selected-bg: #dbeafe;
  --quiz-selected-bg-dark: #1e3a5f;

  /* セカンダリ色 */
  --quiz-secondary: #6b7280;
  --quiz-secondary-hover: #4b5563;
  --quiz-disabled: #9ca3af;

  /* 成功色 */
  --quiz-success: #10b981;
  --quiz-success-light: #d1fae5;
  --quiz-success-dark: #34d399;
  --quiz-success-bg-dark: #064e3b;

  /* エラー色 */
  --quiz-error: #ef4444;
  --quiz-error-light: #fee2e2;
  --quiz-error-dark: #f87171;
  --quiz-error-bg-dark: #7f1d1d;

  /* 解説 */
  --quiz-explanation-bg: #ecfdf5;
  --quiz-explanation-bg-dark: #064e3b;
  --quiz-explanation-text-dark: #d1fae5;

  /* 結果表示 */
  --quiz-result-bg: white;
  --quiz-result-bg-dark: #374151;

  /* ========================================
     広告バナー用変数
     ======================================== */

  /* 基本 */
  --ad-border: #e5e7eb;
  --ad-border-dark: #4b5563;

  /* ナビゲーション */
  --ad-nav-bg: white;
  --ad-nav-border: #d1d5db;
  --ad-nav-hover: #f3f4f6;
  --ad-nav-hover-border: #9ca3af;
  --ad-nav-bg-dark: #374151;
  --ad-nav-border-dark: #4b5563;
  --ad-nav-hover-dark: #4b5563;
  --ad-text-dark: #e5e7eb;

  /* インジケーター */
  --ad-indicator: #6b7280;
  --ad-indicator-dark: #9ca3af;

  /* 感謝メッセージ */
  --ad-thanks: #6b7280;
  --ad-thanks-dark: #9ca3af;

  /* フォールバック（ライト） */
  --ad-fallback-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  --ad-fallback-border: #f59e0b;
  --ad-fallback-text: #92400e;
  --ad-fallback-note: #a16207;
  --ad-fallback-indicator: #b45309;

  /* フォールバック（ダーク） */
  --ad-fallback-bg-dark: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  --ad-fallback-border-dark: #b45309;
  --ad-fallback-text-dark: #fef3c7;
  --ad-fallback-note-dark: #fde68a;
  --ad-fallback-indicator-dark: #fcd34d;
}