/* ==========================================================================
   主題色彩系統 (Theme Color System)
   支援 3 種風格：📜 和紙秋韻 (預設) ➔ ☀️ 白瓷晨曦 ➔ 🌙 深邃夜色
   ========================================================================== */

/* 預設主題：📜 和紙秋韻・京都雅致 (Kyoto Washi Light) */
:root, [data-theme="washi-light"] {
  --theme-key: washi-light;
  --bg-primary: #fcfaf6;
  --bg-secondary: #f4ede4;
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-card-hover: #ffffff;
  --border-color: rgba(44, 30, 20, 0.1);
  --border-highlight: rgba(194, 65, 12, 0.45);
  --text-main: #2d3748;
  --text-heading: #1a202c;
  --text-muted: #64748b;
  --text-accent: #c2410c;
  --accent-gradient: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
  --accent-red: #dc2626;
  --accent-gold: #d97706;
  --accent-cyan: #0891b2;
  --accent-green: #15803d;
  --accent-purple: #9333ea;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-soft: 0 10px 28px rgba(44, 30, 20, 0.07);
  --shadow-hover: 0 18px 36px rgba(194, 65, 12, 0.14);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --hero-title-grad: linear-gradient(135deg, #1a202c 35%, #c2410c 100%);
  --badge-hero-bg: rgba(234, 88, 12, 0.1);
  --badge-hero-text: #c2410c;
  --badge-hero-border: rgba(234, 88, 12, 0.25);
  --card-sub-bg: #f8f6f0;
  --badge-warning-bg: rgba(245, 158, 11, 0.14);
  --badge-warning-text: #9a3412;
  --badge-warning-border: rgba(194, 65, 12, 0.4);
  --badge-confirmed-bg: rgba(21, 128, 61, 0.12);
  --badge-confirmed-text: #166534;
  --badge-confirmed-border: rgba(21, 128, 61, 0.35);
  --badge-flight-bg: rgba(8, 145, 178, 0.12);
  --badge-flight-text: #0e7490;
  --badge-flight-border: rgba(8, 145, 178, 0.35);
  --body-bg-gradient: radial-gradient(circle at 10% 20%, rgba(194, 65, 12, 0.05) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(217, 119, 6, 0.05) 0%, transparent 40%);
  --quick-nav-pill-bg: rgba(255, 255, 255, 0.94);
  --quick-nav-pill-border: rgba(44, 30, 20, 0.14);
  --quick-nav-pill-shadow: 0 10px 30px rgba(44, 30, 20, 0.12);
  --day-chips-track-bg: rgba(255, 255, 255, 0.94);
  --modal-card-bg: #ffffff;
  --modal-card-border: rgba(44, 30, 20, 0.15);
  --modal-card-shadow: 0 25px 60px rgba(44, 30, 20, 0.2);
}

/* ☀️ 白瓷晨曦・現代極簡 (Modern Crisp Porcelain) */
[data-theme="porcelain-light"] {
  --theme-key: porcelain-light;
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-card-hover: #ffffff;
  --border-color: rgba(0, 0, 0, 0.08);
  --border-highlight: rgba(37, 99, 235, 0.35);
  --text-main: #334155;
  --text-heading: #0f172a;
  --text-muted: #64748b;
  --text-accent: #2563eb;
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --accent-red: #e11d48;
  --accent-gold: #d97706;
  --accent-cyan: #0284c7;
  --accent-green: #059669;
  --accent-purple: #7c3aed;
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 18px 36px rgba(37, 99, 235, 0.12);
  --hero-title-grad: linear-gradient(135deg, #0f172a 35%, #2563eb 100%);
  --badge-hero-bg: rgba(37, 99, 235, 0.08);
  --badge-hero-text: #1d4ed8;
  --badge-hero-border: rgba(37, 99, 235, 0.25);
  --card-sub-bg: #f8fafc;
  --badge-warning-bg: rgba(234, 88, 12, 0.12);
  --badge-warning-text: #c2410c;
  --badge-warning-border: rgba(234, 88, 12, 0.4);
  --badge-confirmed-bg: rgba(5, 150, 105, 0.12);
  --badge-confirmed-text: #047857;
  --badge-confirmed-border: rgba(5, 150, 105, 0.35);
  --badge-flight-bg: rgba(2, 132, 199, 0.12);
  --badge-flight-text: #0369a1;
  --badge-flight-border: rgba(2, 132, 199, 0.35);
  --body-bg-gradient: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.04) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(2, 132, 199, 0.04) 0%, transparent 40%);
  --quick-nav-pill-bg: rgba(255, 255, 255, 0.95);
  --quick-nav-pill-border: rgba(0, 0, 0, 0.1);
  --quick-nav-pill-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --day-chips-track-bg: rgba(255, 255, 255, 0.95);
  --modal-card-bg: #ffffff;
  --modal-card-border: rgba(0, 0, 0, 0.12);
  --modal-card-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

/* 🌙 深邃夜色 (Obsidian Dark) */
[data-theme="dark"] {
  --theme-key: dark;
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-card: rgba(22, 27, 34, 0.85);
  --bg-card-hover: rgba(30, 37, 48, 0.95);
  --border-color: rgba(240, 246, 252, 0.1);
  --border-highlight: rgba(255, 126, 95, 0.4);
  --text-main: #f0f6fc;
  --text-heading: #ffffff;
  --text-muted: #8b949e;
  --text-accent: #ff7e5f;
  --accent-gradient: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
  --accent-red: #ff5252;
  --accent-gold: #ffb74d;
  --accent-cyan: #4dd0e1;
  --accent-green: #81c784;
  --accent-purple: #ba68c8;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 20px 40px rgba(255, 126, 95, 0.15);
  --hero-title-grad: linear-gradient(135deg, #ffffff 40%, #ffb74d 100%);
  --badge-hero-bg: rgba(255, 126, 95, 0.15);
  --badge-hero-text: #ff9e80;
  --badge-hero-border: rgba(255, 126, 95, 0.3);
  --card-sub-bg: rgba(0, 0, 0, 0.25);
  --badge-warning-bg: rgba(255, 202, 40, 0.18);
  --badge-warning-text: #ffe082;
  --badge-warning-border: rgba(255, 202, 40, 0.5);
  --badge-confirmed-bg: rgba(102, 187, 106, 0.18);
  --badge-confirmed-text: #a5d6a7;
  --badge-confirmed-border: rgba(102, 187, 106, 0.45);
  --badge-flight-bg: rgba(77, 208, 225, 0.12);
  --badge-flight-text: #80deea;
  --badge-flight-border: rgba(77, 208, 225, 0.25);
  --body-bg-gradient: radial-gradient(circle at 10% 20%, rgba(255, 126, 95, 0.08) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(77, 208, 225, 0.06) 0%, transparent 40%);
  --quick-nav-pill-bg: rgba(13, 17, 23, 0.94);
  --quick-nav-pill-border: rgba(255, 126, 95, 0.45);
  --quick-nav-pill-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 16px rgba(255, 126, 95, 0.2);
  --day-chips-track-bg: rgba(13, 17, 23, 0.92);
  --modal-card-bg: linear-gradient(145deg, rgba(26, 32, 44, 0.98) 0%, rgba(18, 22, 30, 0.98) 100%);
  --modal-card-border: rgba(255, 126, 95, 0.4);
  --modal-card-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 126, 95, 0.15);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  background-image: var(--body-bg-gradient);
  background-attachment: fixed;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}