/* CSS変数とテーマ設定 - Clory遊び心デザイン */
:root {
  /* メインカラーパレット - カラフル&フレンドリー */
  --accent-primary: #ff6b35; /* 元気なオレンジ - CTA、重要要素 */
  --accent-secondary: #4ecdc4; /* 爽やかなターコイズ - リンク、二次アクション */
  --accent-tertiary: #ffe66d; /* 明るいイエロー - ハイライト、バッジ */
  --accent-success: #a8e6cf; /* ミントグリーン - 成功、チェックイン */
  --accent-favorite: #ff6b9d; /* 優しいピンク - お気に入り、いいね */
  --accent-hover: #ff8a65; /* ホバー状態 */

  /* ライトモード（デフォルト） - 明るく広々 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fbff; /* わずかにブルーティント */
  --bg-tertiary: #f0f7ff; /* より明るいブルーティント */
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

  /* テキストカラー - 読みやすさ重視 */
  --text-primary: #2c3e50; /* ソフトブラック */
  --text-secondary: #7f8c8d; /* 中間グレー */
  --text-tertiary: #bdc3c7; /* 薄いグレー */
  --text-on-primary: #ffffff; /* 白文字 */

  /* ボーダー - 控えめで柔らかい */
  --border-color: #e1e8ed;
  --border-radius-sm: 12px;
  --border-radius-md: 16px;
  --border-radius-lg: 20px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;

  /* インタラクション */
  --hover-bg: rgba(78, 205, 196, 0.08);
  --hover-transform: translateY(-2px);
  --active-scale: 0.98;

  /* カード - 立体的で遊び心 */
  --card-bg: #ffffff;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(78, 205, 196, 0.1);
  --card-shadow-colored: 0 4px 16px rgba(255, 107, 53, 0.15);

  /* スペーシング - 広々とした */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* グラデーション - カラフル */
  --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ff8f6b 50%, #ffb199 100%);
  --gradient-secondary: linear-gradient(135deg, #4ecdc4 0%, #6dd5d0 50%, #8de0dc 100%);
  --gradient-tertiary: linear-gradient(135deg, #ffe66d 0%, #fff299 100%);
  --gradient-success: linear-gradient(135deg, #a8e6cf 0%, #c5f0e1 100%);
  --gradient-favorite: linear-gradient(135deg, #ff6b9d 0%, #ff8fb3 100%);
  --gradient-hero: linear-gradient(135deg, #ffcc00 0%, #e55a2b 50%, #d9456f 100%);

  /* コントラスト強化用オーバーレイ */
  --gradient-hero-overlay: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );

  /* グラデーション上のテキスト色 */
  --text-on-gradient: #ffffff;
  --text-on-gradient-secondary: rgba(255, 255, 255, 0.95);

  /* タイポグラフィ */
  --font-display: 'Poppins', 'Noto Sans JP', sans-serif; /* 見出し用 */
  --font-body: 'Noto Sans JP', system-ui, -apple-system, sans-serif; /* 本文用 */
  --font-accent: 'Quicksand', 'Noto Sans JP', sans-serif; /* アクセント用 */

  /* フォントサイズ */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */

  /* アニメーション */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ダークモード - 深みのある遊び心 */
[data-theme='dark'] {
  /* 背景 - 深く豊かな */
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f29;
  --bg-tertiary: #252d3a;
  --bg-gradient: linear-gradient(180deg, #0f1419 0%, #1a1f29 100%);

  /* テキスト - 高コントラスト */
  --text-primary: #f5f5f5;
  --text-secondary: #b8c5d3;
  --text-tertiary: #7a8a9e;
  --text-on-primary: #ffffff;

  /* ボーダー */
  --border-color: #2f3845;
  --hover-bg: rgba(78, 205, 196, 0.15);

  /* カード */
  --card-bg: #1a1f29;
  --card-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(78, 205, 196, 0.2);
  --card-shadow-colored: 0 6px 24px rgba(255, 107, 53, 0.25);

  /* アクセントカラー - 明るく調整 */
  --accent-primary: #ff8a65;
  --accent-secondary: #6dd5d0;
  --accent-tertiary: #fff299;
  --accent-success: #c5f0e1;
  --accent-favorite: #ff8fb3;
  --accent-hover: #ffb199;

  /* ダークモード専用グラデーション */
  --gradient-hero: linear-gradient(135deg, #332211 0%, #4a1e10 50%, #3d1525 100%);
  --gradient-hero-overlay: none;
  --text-on-gradient: #ffffff;
  --text-on-gradient-secondary: rgba(255, 255, 255, 0.95);
}

/* グローバルトランジション - 滑らかで遊び心 */
* {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

/* スクロールバー - カラフルで楽しい */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-secondary), var(--accent-primary));
  border-radius: var(--border-radius-sm);
  border: 2px solid var(--bg-secondary);
  transition: all var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-tertiary));
  transform: scale(1.05);
}

/* ダークモードのスクロールバー */
[data-theme='dark'] ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-secondary), var(--accent-primary));
  border: 2px solid var(--bg-tertiary);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-tertiary), var(--accent-favorite));
}

/* ユーティリティクラス */
.playful-bounce {
  animation: bounce var(--transition-bounce) infinite;
}

.playful-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.playful-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

/* アクセシビリティ - モーション軽減 (グローバル) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}