/* ============================================================================
   Lazzy 主題控制中心 (theme.css) — 單一修改點，全站套用
   ----------------------------------------------------------------------------
   使用方式：
   1. 本檔在 base.html 於 style.css「之前」載入，作為全站設計變數的唯一權威來源。
   2. 要調整全站風格時，只改這裡的變數即可，不要在各頁面寫死色碼。
   3. 三層結構：原始色票(Primitive) → 語意變數(Semantic) → 元件變數(Component)。
      改品牌色改 Semantic；改某元件外觀改 Component。
   ============================================================================ */

:root {
    /* ───────── 1. 原始色票 Primitive（純色，不直接用於元件）───────── */
    --brand-orange: #FF6B35;        /* 品牌主橘（全站唯一橘，取代先前混用的 #F59E0B / #FF8F5E） */
    --brand-orange-600: #E55A2B;    /* 深一階（hover/按壓） */
    --brand-orange-050: #FFF0EB;    /* 淺色表面 */
    --brand-orange-rgb: 255, 107, 53;  /* 品牌橘 RGB 分量，供 rgba(var(--brand-orange-rgb), α) 用 */
    --brand-ink: #1B2838;           /* 深靛藍（標題/深色卡片） */
    --brand-cyan: #00B4D8;          /* 青藍（連結/地圖標記/資訊） */
    --brand-violet: #7C5CFC;        /* 紫（DNA 設定等特色卡片漸層） */

    /* ───────── 2. 語意變數 Semantic（與現有 style.css 變數名相容）───────── */
    --color-primary: var(--brand-ink);
    --color-primary-light: #2D4059;
    --color-primary-surface: #E8EDF2;

    --color-accent: var(--brand-orange);          /* 全站 CTA 主色 */
    --color-accent-hover: var(--brand-orange-600);
    --color-accent-surface: var(--brand-orange-050);

    --color-secondary: var(--brand-cyan);
    --color-secondary-surface: #E6F7FC;

    /* 中性色（淺色模式） */
    --color-bg: #F7F8FA;
    --color-surface: #FFFFFF;
    --color-border: #E5E7EB;
    --color-text: #1A1A2E;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;

    /* 語意色 */
    --color-success: #10B981;
    --color-warning: #F59E0B;   /* 僅用於警示語意，非品牌橘 */
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* 深色模式色盤 */
    --dark-bg: #0F1923;
    --dark-surface: #1B2838;
    --dark-surface-elevated: #243447;
    --dark-border: #374151;
    --dark-text: #F3F4F6;
    --dark-text-secondary: #9CA3AF;

    /* 陰影 / 圓角 / 字級 / 動效 / 疊層（沿用現有命名，集中管理） */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 2px 4px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --shadow-navbar: 0 2px 8px rgba(0,0,0,.04);
    --shadow-bottom-nav: 0 -2px 16px rgba(0,0,0,.06);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --font-primary: 'Inter', -apple-system, sans-serif;
    --font-chinese: 'Noto Sans TC', 'PingFang TC', sans-serif;
    --font-brand: 'Inter', sans-serif;

    --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
    --transition-base: 250ms cubic-bezier(.4,0,.2,1);
    --transition: all 250ms cubic-bezier(.4,0,.2,1);

    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-5: 24px; --space-6: 32px;

    --z-base: 0; --z-dropdown: 10; --z-sticky: 20;
    --z-overlay: 30; --z-toast: 50; --z-modal: 1060;

    --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem;
    --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:2rem;

    /* Legacy 別名（相容既有引用） */
    --primary: var(--color-accent);
    --primary-dark: var(--color-accent-hover);
    --primary-light: var(--color-accent-surface);
    --secondary: var(--color-secondary);
    --secondary-dark: #0099B8;

    /* ───────── 3. 元件變數 Component（調整單一元件外觀就改這層）───────── */

    /* 主要按鈕（發起揪團、搜尋、一鍵規劃…全站橘色 CTA） */
    --btn-primary-bg: var(--color-accent);
    --btn-primary-bg-hover: var(--color-accent-hover);
    --btn-primary-fg: #FFFFFF;
    --btn-primary-radius: var(--radius-full);
    --btn-primary-glow: 0 6px 20px rgba(255,107,53,.35);   /* 橘色按鈕光暈，想關掉改成 none */
    --btn-secondary-bg: transparent;
    --btn-secondary-fg: var(--color-text);
    --btn-secondary-border: var(--color-border);

    /* 卡片（個人卡、揪團卡、特色卡） */
    --card-bg: var(--color-surface);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);
    --card-pad: var(--space-4);

    /* 特色漸層卡（揪團指揮中心 / Lazzy DNA 設定） */
    --hero-gradient: linear-gradient(135deg, var(--brand-ink), #24344a);
    --feature-gradient: linear-gradient(135deg, var(--brand-violet), #5b8def);

    /* 底部導航列 */
    --nav-bg: var(--color-surface);
    --nav-fg: var(--color-text-muted);          /* 未選取項目色（提高對比可調深） */
    --nav-fg-active: var(--color-accent);       /* 選取項目色 */
    --nav-center-bg: var(--color-accent);       /* 中央凸起圓鈕底色 */
    --nav-center-glow: 0 4px 14px rgba(255,107,53,.45);
    --nav-shadow: var(--shadow-bottom-nav);

    /* 頂部列 */
    --topbar-bg: var(--color-surface);
    --topbar-fg: var(--color-text);
    --topbar-icon: var(--color-accent);

    /* 空狀態（尚無揪團 / 尚無活動…） */
    --empty-icon-bg: #EEF1F4;
    --empty-icon-fg: #B8C0CC;
    --empty-title: var(--color-text);
    --empty-subtitle: var(--color-text-secondary);

    /* 輸入框（貼連結搜尋框等） */
    --input-bg: var(--color-surface);
    --input-border: var(--color-border);
    --input-radius: var(--radius-full);
    --input-focus: var(--color-accent);

    /* DNA 設定選擇膠囊狀態色（selection-chip 選中；集中管理原寫死色碼） */
    --chip-select-grad: linear-gradient(135deg, #64B5F6 0%, #1976D2 100%);
    --chip-select-shadow: 0 4px 10px rgba(25,118,210,.25);
    --chip-avoid-grad: linear-gradient(135deg, #ff7675 0%, #d63031 100%);
    --chip-avoid-shadow: 0 4px 10px rgba(214,48,49,.25);
}

/* 深色模式下自動覆寫元件變數（body.dark-mode 由現有 JS 切換） */
body.dark-mode {
    --card-bg: var(--dark-surface);
    --nav-bg: var(--dark-surface);
    --nav-fg: var(--dark-text-secondary);
    --topbar-bg: var(--dark-surface);
    --topbar-fg: var(--dark-text);
    --empty-icon-bg: #22303f;
    --empty-icon-fg: #4b5b6b;
    --empty-title: var(--dark-text);
    --empty-subtitle: var(--dark-text-secondary);
    --input-bg: var(--dark-surface-elevated);
    --input-border: var(--dark-border);
    --btn-secondary-fg: var(--dark-text);
    --btn-secondary-border: var(--dark-border);
}