/* Clory（Outing Board）統一変数定義 - 緊急テーマ修正統合版 */

/* ルート変数（デフォルト：ダークテーマ） */
:root {
  /* ビジュアルアイデンティティカラー */
  --color-primary: #ffa500 !important; /* オレンジ - 冒険心と活力 */
  --color-primary-dark: #e69500 !important;
  --color-primary-light: #ffb733 !important;
  --color-primary-transparent: rgba(255, 165, 0, 0.1) !important;
  --color-primary-alpha: rgba(255, 165, 0, 0.15) !important;
  --color-primary-alpha-light: rgba(255, 165, 0, 0.05) !important;

  /* グラデーション */
  --gradient-primary: linear-gradient(135deg, #ffa500 0%, #ffb733 100%) !important;
  --gradient-primary-reverse: linear-gradient(135deg, #ffb733 0%, #ffa500 100%) !important;

  --color-secondary: #1e90ff !important; /* ドジャーブルー - 信頼性と穏やかさ */
  --color-secondary-dark: #0070e0 !important;
  --color-secondary-light: #51acff !important;

  --color-matching: #ff6b6b !important; /* 人とのつながりを表現する暖かみのある赤みのピンク */
  --color-matching-light: rgba(255, 107, 107, 0.1) !important;

  /* テーマカラー（ダークモード - デフォルト） */
  --color-background: #121212 !important; /* ほぼブラック - バッテリー消費削減と視認性向上 */
  --color-surface: #1e1e1e !important; /* ダークグレー - カード背景などの要素 */
  --color-surface-light: #2c2c2c !important;
  --color-text: #ffffff !important; /* 白 - 最高の可読性 */
  --color-text-secondary: #b3b3b3 !important; /* ライトグレー - 補足情報 */
  --color-text-accent: #ffa500 !important; /* オレンジ - 重要事項の強調 */
  --color-border: #333333 !important;

  /* 機能的カラー */
  --color-success: #4caf50 !important; /* グリーン */
  --color-error: #f44336 !important; /* レッド */
  --color-error-alpha: rgba(244, 67, 54, 0.1) !important;
  --color-warning: #ffc107 !important; /* イエロー */
  --color-info: #2196f3 !important; /* ブルー */
  --color-special: #9c27b0 !important; /* パープル - 限定イベントなどに使用 */

  /* ホバー効果 */
  --color-hover: rgba(255, 165, 0, 0.1) !important;

  /* グレースケール変数 */
  --color-gray-100: #f8f9fa !important;
  --color-gray-200: #e9ecef !important;
  --color-gray-300: #dee2e6 !important;
  --color-gray-400: #ced4da !important;
  --color-gray-500: #adb5bd !important;
  --color-gray-600: #6c757d !important;
  --color-gray-700: #495057 !important;
  --color-gray-800: #343a40 !important;
  --color-gray-900: #212529 !important;

  /* レイアウト設定 */
  --container-max-width: 1600px;
  --container-padding: 16px;
  --header-height: 60px;
  --footer-height: 60px;
  --side-nav-width: 280px;

  /* 間隔 */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */

  /* フォント */
  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.5rem; /* 24px */

  /* ボーダー */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 24px;

  /* アニメーション */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* シャドウ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1) !important;

  /* Z-index階層 */
  --z-index-base: 1;
  --z-index-header: 100;
  --z-index-footer: 100;
  --z-index-dropdown: 200;
  --z-index-fixed: 500;
  --z-index-overlay: 900;
  --z-index-modal: 1000;
  --z-index-tooltip: 1500;

  /* 変数エイリアス（互換性維持） */
  --bg-color: var(--color-background) !important;
  --bg-color-secondary: var(--color-surface) !important;
  --text-color: var(--color-text) !important;
  --text-color-secondary: var(--color-text-secondary) !important;
  --text-color-tertiary: #7a8a9e !important;
  --primary-color: var(--color-primary) !important;
  --border-color: var(--color-border) !important;
  --color-surface-variant: var(--color-surface-light) !important;
  --color-surface-hover: #3c3c3c !important;
  --color-text-primary: var(--color-text) !important;
  --error-color: var(--color-error) !important;

  /* その他 */
  color-scheme: dark;
}

/* ライトモード設定 */
html[data-theme='light'] {
  --color-background: #f8f9fa !important;
  --color-surface: #ffffff !important;
  --color-surface-light: #f5f5f5 !important;
  --color-text: #212121 !important;
  --color-text-secondary: #757575 !important;
  --color-border: #e0e0e0 !important;
  --color-primary-transparent: rgba(255, 165, 0, 0.2) !important;
  --color-matching-light: rgba(255, 107, 107, 0.05) !important;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.06) !important;

  /* ホバー効果 */
  --color-hover-light: rgba(0, 0, 0, 0.05) !important;

  /* 変数エイリアス（ライトモード用） */
  --bg-color: var(--color-background) !important;
  --bg-color-secondary: var(--color-surface) !important;
  --text-color: var(--color-text) !important;
  --text-color-secondary: var(--color-text-secondary) !important;
  --text-color-tertiary: #9e9e9e !important;
  --primary-color: var(--color-primary) !important;
  --border-color: var(--color-border) !important;
  --color-surface-variant: var(--color-surface-light) !important;
  --color-surface-hover: #e8e8e8 !important;
  --color-text-primary: var(--color-text) !important;
  --error-color: var(--color-error) !important;

  color-scheme: light;
}

/* ダークモード設定 */
html[data-theme='dark'] {
  --color-background: #121212 !important;
  --color-surface: #1e1e1e !important;
  --color-surface-light: #2c2c2c !important;
  --color-text: #ffffff !important;
  --color-text-secondary: #b3b3b3 !important;
  --color-border: #333333 !important;
  --color-primary-transparent: rgba(255, 165, 0, 0.1) !important;
  --color-matching-light: rgba(255, 107, 107, 0.1) !important;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1) !important;

  /* ホバー効果 */
  --color-hover-dark: rgba(255, 255, 255, 0.1) !important;

  /* 変数エイリアス（ダークモード用） */
  --bg-color: var(--color-background) !important;
  --bg-color-secondary: var(--color-surface) !important;
  --text-color: var(--color-text) !important;
  --text-color-secondary: var(--color-text-secondary) !important;
  --text-color-tertiary: #7a8a9e !important;
  --primary-color: var(--color-primary) !important;
  --border-color: var(--color-border) !important;
  --color-surface-variant: var(--color-surface-light) !important;
  --color-surface-hover: #3c3c3c !important;
  --color-text-primary: var(--color-text) !important;
  --error-color: var(--color-error) !important;

  color-scheme: dark;
}

/* 🚨 緊急テーマ修正統合（ルール準拠版） */

/* すべての基本要素の強制修正 */
body {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  font-family: var(--font-family-base) !important;
}

[data-theme='dark'] body {
  background-color: #121212 !important;
  color: #ffffff !important;
}

[data-theme='light'] body {
  background-color: #f8f9fa !important;
  color: #212121 !important;
}

/* すべてのコンテナ要素の強制修正 */
#app,
#app-structure,
#app-main,
#app-content,
.content-area,
.home-page,
.place-page {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
}

[data-theme='dark'] #app,
[data-theme='dark'] #app-structure,
[data-theme='dark'] #app-main,
[data-theme='dark'] #app-content,
[data-theme='dark'] .content-area,
[data-theme='dark'] .home-page,
[data-theme='dark'] .place-page {
  background-color: #121212 !important;
  color: #ffffff !important;
}

[data-theme='light'] #app,
[data-theme='light'] #app-structure,
[data-theme='light'] #app-main,
[data-theme='light'] #app-content,
[data-theme='light'] .content-area,
[data-theme='light'] .home-page,
[data-theme='light'] .place-page {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

/* すべてのテキスト要素の強制修正 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
button,
.section-title,
.hero-title,
.category-name,
.place-name,
.place-info,
.place-meta,
.place-location,
.category-description,
.text-primary,
.text-secondary {
  color: var(--color-text) !important;
}

[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6,
[data-theme='dark'] p,
[data-theme='dark'] span,
[data-theme='dark'] div,
[data-theme='dark'] a,
[data-theme='dark'] button,
[data-theme='dark'] .section-title,
[data-theme='dark'] .hero-title,
[data-theme='dark'] .category-name,
[data-theme='dark'] .place-name,
[data-theme='dark'] .place-info,
[data-theme='dark'] .place-meta,
[data-theme='dark'] .place-location,
[data-theme='dark'] .category-description,
[data-theme='dark'] .text-primary,
[data-theme='dark'] .text-secondary {
  color: #ffffff !important;
}

[data-theme='light'] h1,
[data-theme='light'] h2,
[data-theme='light'] h3,
[data-theme='light'] h4,
[data-theme='light'] h5,
[data-theme='light'] h6,
[data-theme='light'] p,
[data-theme='light'] span,
[data-theme='light'] div,
[data-theme='light'] a,
[data-theme='light'] button,
[data-theme='light'] .section-title,
[data-theme='light'] .hero-title,
[data-theme='light'] .category-name,
[data-theme='light'] .place-name,
[data-theme='light'] .place-info,
[data-theme='light'] .place-meta,
[data-theme='light'] .place-location,
[data-theme='light'] .category-description,
[data-theme='light'] .text-primary,
[data-theme='light'] .text-secondary {
  color: #212529 !important;
}

/* カード系要素の強制修正 */
.category-card,
.place-card,
.place-card-mobile,
.card,
.modal-content {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

[data-theme='dark'] .category-card,
[data-theme='dark'] .place-card,
[data-theme='dark'] .place-card-mobile,
[data-theme='dark'] .card,
[data-theme='dark'] .modal-content {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-color: #333333 !important;
}

[data-theme='light'] .category-card,
[data-theme='light'] .place-card,
[data-theme='light'] .place-card-mobile,
[data-theme='light'] .card,
[data-theme='light'] .modal-content {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #e9ecef !important;
}

/* 入力フィールドの修正 */
input,
textarea,
select,
.form-control,
.search-input {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

[data-theme='dark'] input,
[data-theme='dark'] textarea,
[data-theme='dark'] select,
[data-theme='dark'] .form-control,
[data-theme='dark'] .search-input {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border-color: #333333 !important;
}

[data-theme='light'] input,
[data-theme='light'] textarea,
[data-theme='light'] select,
[data-theme='light'] .form-control,
[data-theme='light'] .search-input {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #e9ecef !important;
}

/* プレースホルダーテキストの修正 */
input::placeholder,
textarea::placeholder,
.search-input::placeholder {
  color: var(--color-text-secondary) !important;
  opacity: 1 !important;
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder,
[data-theme='dark'] .search-input::placeholder {
  color: #b3b3b3 !important;
}

[data-theme='light'] input::placeholder,
[data-theme='light'] textarea::placeholder,
[data-theme='light'] .search-input::placeholder {
  color: #6c757d !important;
}