/**
 * Kagami LP - CSS変数定義
 * extension/styles/variables.css ベースにLP用変数を追加
 */

:root {
  /* カラーパレット */
  --color-primary: #4285f4;
  --color-primary-hover: #3367d6;
  --color-primary-light: #e3f2fd;
  --color-success: #4caf50;
  --color-success-light: #e8f5e9;
  --color-warning: #ef6c00;
  --color-warning-light: #fff3e0;
  --color-error: #c62828;
  --color-error-light: #ffebee;
  --color-insight: #7b1fa2;
  --color-insight-light: #f3e5f5;

  /* テキストカラー */
  --text-primary: #1a1a1a;
  --text-secondary: #333;
  --text-tertiary: #555;
  --text-muted: #666;
  --text-placeholder: #999;

  /* 背景色 */
  --bg-primary: #fff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #f9f9f9;
  --bg-card: #fff;
  --bg-hover: rgba(0, 0, 0, 0.04);

  /* ボーダー・シャドウ */
  --border-color: #e0e0e0;
  --border-color-light: #eee;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

  /* スペーシング */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;

  /* 角丸 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* トランジション */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease-out;

  /* タイポグラフィ（Web向けスケールアップ） */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.8;
  --line-height-tight: 1.3;

  /* LP用レイアウト */
  --max-width: 1100px;
  --section-padding: 80px 20px;
  --nav-height: 64px;
}

/* ダークモード - 明示的に設定された場合 */
[data-theme="dark"] {
  --color-primary: #8ab4f8;
  --color-primary-hover: #aecbfa;
  --color-primary-light: #1e3a5f;
  --color-success: #81c784;
  --color-success-light: #1b3d1e;
  --color-warning: #ffb74d;
  --color-warning-light: #4a3000;
  --color-error: #ef5350;
  --color-error-light: #4a1616;
  --color-insight: #ce93d8;
  --color-insight-light: #3d1f47;

  --text-primary: #e8eaed;
  --text-secondary: #bdc1c6;
  --text-tertiary: #9aa0a6;
  --text-muted: #80868b;
  --text-placeholder: #5f6368;

  --bg-primary: #202124;
  --bg-secondary: #292a2d;
  --bg-tertiary: #35363a;
  --bg-card: #292a2d;
  --bg-hover: rgba(255, 255, 255, 0.08);

  --border-color: #5f6368;
  --border-color-light: #3c4043;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* システム設定に従う（明示的なテーマ指定がない場合） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #8ab4f8;
    --color-primary-hover: #aecbfa;
    --color-primary-light: #1e3a5f;
    --color-success: #81c784;
    --color-success-light: #1b3d1e;
    --color-warning: #ffb74d;
    --color-warning-light: #4a3000;
    --color-error: #ef5350;
    --color-error-light: #4a1616;
    --color-insight: #ce93d8;
    --color-insight-light: #3d1f47;

    --text-primary: #e8eaed;
    --text-secondary: #bdc1c6;
    --text-tertiary: #9aa0a6;
    --text-muted: #80868b;
    --text-placeholder: #5f6368;

    --bg-primary: #202124;
    --bg-secondary: #292a2d;
    --bg-tertiary: #35363a;
    --bg-card: #292a2d;
    --bg-hover: rgba(255, 255, 255, 0.08);

    --border-color: #5f6368;
    --border-color-light: #3c4043;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  }
}