/**
 * TalkStock Design Token System v2.0
 * ==========================================
 * 三層架構：Primitive → Semantic → Component
 *
 * Layer 1: 原始色板（不直接引用）
 * Layer 2: 語義化 Token（元件實際引用）
 * Layer 3: 元件 Token（高複雜度元件專屬）
 *
 * 橘色政策：僅保留於 CTA / Logo / Active indicator
 * 輔助色：Warm Stone #78716C 系列
 *
 * 最後更新：2026-02-16
 */

/* ==========================================================================
   Layer 1: Primitive Tokens（原始色板）
   僅供 Layer 2/3 引用，元件不應直接使用
   ========================================================================== */
:root {
    /* --- Orange 色階 --- */
    --primitive-orange-50: #FFF7ED;
    --primitive-orange-100: #FFEDD5;
    --primitive-orange-200: #FED7AA;
    --primitive-orange-300: #FDBA74;
    --primitive-orange-400: #FB923C;
    --primitive-orange-500: #F97316;
    --primitive-orange-600: #EA580C;
    --primitive-orange-700: #C2410C;
    --primitive-orange-800: #9A3412;
    --primitive-orange-900: #7C2D12;
    --primitive-orange-950: #431407;

    /* --- Stone 色階（暖灰棕） --- */
    --primitive-stone-50: #FAFAF9;
    --primitive-stone-100: #F5F5F4;
    --primitive-stone-200: #E7E5E4;
    --primitive-stone-300: #D6D3CE;
    --primitive-stone-400: #A8A29E;
    --primitive-stone-500: #78716C;
    --primitive-stone-600: #57534E;
    --primitive-stone-700: #44403C;
    --primitive-stone-800: #292524;
    --primitive-stone-900: #1C1917;
    --primitive-stone-950: #0C0A09;

    /* --- Paper 色階（暖紙色） --- */
    --primitive-paper-50: #FEFDFB;
    --primitive-paper-100: #FAFAF7;
    --primitive-paper-200: #F5F4EF;
    --primitive-paper-300: #EFEEE8;
    --primitive-paper-400: #E8E5E0;
    --primitive-paper-500: #D6D3CE;

    /* --- 功能色 --- */
    --primitive-green-500: #10B981;
    --primitive-green-600: #059669;
    --primitive-red-500: #EF4444;
    --primitive-red-600: #DC2626;
    --primitive-amber-500: #F59E0B;
    --primitive-amber-600: #D97706;
    --primitive-blue-500: #3B82F6;
    --primitive-blue-600: #2563EB;

    /* --- 市場色（漲跌） --- */
    --primitive-market-up: #DC2626;
    --primitive-market-down: #16A34A;
    --primitive-market-up-dark: #FF4444;
    --primitive-market-down-dark: #22C55E;
}

/* ==========================================================================
   Layer 2: Semantic Tokens — 淺色主題（預設）
   元件應引用這些 token，而非 Primitive 或硬編碼色碼
   ========================================================================== */
:root {
    /* --- 背景 --- */
    --color-bg-page: #F5F4EF;
    --color-bg-secondary: #FAFAF7;
    --color-bg-tertiary: #FEFDFB;
    --color-bg-elevated: #FFFFFF;
    --color-bg-hover: #EFEEE8;
    --color-bg-active: #E8E5E0;
    --color-bg-inset: #F0EFEA;

    /* --- 文字 --- */
    --color-text-primary: #1C1917;
    --color-text-secondary: #57534E;
    --color-text-tertiary: #78716C;
    --color-text-muted: #A8A29E;
    --color-text-on-accent: #FFFFFF;

    /* --- 邊框 --- */
    --color-border-default: #E8E5E0;
    --color-border-strong: #D6D3CE;
    --color-border-subtle: rgba(0, 0, 0, 0.06);
    --color-border-focus: #F97316;

    /* --- 品牌橘（僅 CTA / Logo / Active） --- */
    --color-accent: #F97316;
    --color-accent-hover: #EA580C;
    --color-accent-active: #C2410C;
    --color-accent-subtle: rgba(249, 115, 22, 0.10);
    --color-accent-muted: rgba(249, 115, 22, 0.06);

    /* --- 次要色（Warm Stone，取代大量橘色） --- */
    --color-secondary: #78716C;
    --color-secondary-hover: #57534E;
    --color-secondary-subtle: rgba(120, 113, 108, 0.10);
    --color-secondary-muted: rgba(120, 113, 108, 0.06);

    /* --- 功能色 --- */
    --color-success: #10B981;
    --color-success-subtle: rgba(16, 185, 129, 0.10);
    --color-danger: #EF4444;
    --color-danger-subtle: rgba(239, 68, 68, 0.10);
    --color-warning: #F59E0B;
    --color-warning-subtle: rgba(245, 158, 11, 0.10);
    --color-info: #3B82F6;
    --color-info-subtle: rgba(59, 130, 246, 0.10);

    /* --- 市場色 --- */
    --color-market-up: #DC2626;
    --color-market-down: #16A34A;

    /* --- 陰影（Stone-based，不再橘色） --- */
    --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
    --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
    --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.10), 0 4px 8px rgba(28, 25, 23, 0.04);
    --shadow-xl: 0 20px 48px rgba(28, 25, 23, 0.12), 0 8px 16px rgba(28, 25, 23, 0.06);
    --shadow-border: 0 0 0 1px rgba(28, 25, 23, 0.06);
    --shadow-accent: 0 4px 12px rgba(249, 115, 22, 0.15);

    /* --- 滾動條 --- */
    --color-scrollbar-track: transparent;
    --color-scrollbar-thumb: rgba(120, 113, 108, 0.25);
    --color-scrollbar-thumb-hover: rgba(120, 113, 108, 0.40);
}

/* ==========================================================================
   Layer 2: Semantic Tokens — 深色主題（暖調）
   ========================================================================== */
[data-theme="dark"],
.dark-mode {
    /* --- 背景（暖黑/暖棕） --- */
    --color-bg-page: #0C0A09;
    --color-bg-secondary: #1C1917;
    --color-bg-tertiary: #292524;
    --color-bg-elevated: #44403C;
    --color-bg-hover: rgba(255, 255, 255, 0.06);
    --color-bg-active: rgba(255, 255, 255, 0.10);
    --color-bg-inset: #1A1816;

    /* --- 文字 --- */
    --color-text-primary: #F5F5F4;
    --color-text-secondary: #A8A29E;
    --color-text-tertiary: #78716C;
    --color-text-muted: #57534E;

    /* --- 邊框 --- */
    --color-border-default: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.16);
    --color-border-subtle: rgba(255, 255, 255, 0.04);

    /* --- 品牌橘（深色略亮） --- */
    --color-accent: #FB923C;
    --color-accent-hover: #F97316;
    --color-accent-active: #EA580C;
    --color-accent-subtle: rgba(249, 115, 22, 0.15);
    --color-accent-muted: rgba(249, 115, 22, 0.08);

    /* --- 次要色 --- */
    --color-secondary: #A8A29E;
    --color-secondary-hover: #D6D3CE;
    --color-secondary-subtle: rgba(168, 162, 158, 0.12);
    --color-secondary-muted: rgba(168, 162, 158, 0.06);

    /* --- 功能色（深色提亮） --- */
    --color-success: #34D399;
    --color-success-subtle: rgba(52, 211, 153, 0.12);
    --color-danger: #F87171;
    --color-danger-subtle: rgba(248, 113, 113, 0.12);
    --color-warning: #FBBF24;
    --color-warning-subtle: rgba(251, 191, 36, 0.12);
    --color-info: #60A5FA;
    --color-info-subtle: rgba(96, 165, 250, 0.12);

    /* --- 市場色（深色提亮） --- */
    --color-market-up: #FF4444;
    --color-market-down: #22C55E;

    /* --- 陰影 --- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.40), 0 8px 16px rgba(0, 0, 0, 0.20);
    --shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-accent: 0 4px 12px rgba(251, 146, 60, 0.20);

    /* --- 滾動條 --- */
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Layer 3: Component Tokens — 側邊欄
   ========================================================================== */
:root {
    --sidebar-bg: var(--color-bg-secondary);
    --sidebar-bg-hover: var(--color-bg-hover);
    --sidebar-bg-active: var(--color-accent-subtle);
    --sidebar-text: var(--color-text-secondary);
    --sidebar-text-active: var(--color-accent);
    --sidebar-border: var(--color-border-default);
    --sidebar-icon: var(--color-text-tertiary);
    --sidebar-icon-active: var(--color-accent);
    --sidebar-width-collapsed: 60px;
    --sidebar-width-expanded: 280px;
    --sidebar-transition: 300ms ease;
    --sidebar-hover-delay-expand: 150ms;
    --sidebar-hover-delay-collapse: 300ms;
}

[data-theme="dark"] {
    --sidebar-bg: var(--color-bg-secondary);
    --sidebar-bg-hover: var(--color-bg-hover);
    --sidebar-text: var(--color-text-secondary);
    --sidebar-border: var(--color-border-default);
}

/* ==========================================================================
   Layer 3: Component Tokens — 聊天區
   ========================================================================== */
:root {
    --chat-bg: var(--color-bg-page);
    --chat-input-bg: var(--color-bg-elevated);
    --chat-input-border: var(--color-border-default);
    --chat-input-focus-border: var(--color-accent);
    --chat-input-focus-ring: var(--color-accent-subtle);
    --chat-bubble-user: var(--color-accent-subtle);
    --chat-bubble-ai: var(--color-bg-secondary);
    --chat-timestamp: var(--color-text-muted);
}

[data-theme="dark"] {
    --chat-input-bg: var(--color-bg-tertiary);
    --chat-bubble-user: var(--color-accent-muted);
    --chat-bubble-ai: var(--color-bg-tertiary);
}

/* ==========================================================================
   Layer 3: Component Tokens — 報價面板
   ========================================================================== */
:root {
    --quote-panel-bg: #FAF9F6;
    --quote-panel-surface: #FEFDFB;
    --quote-header-bg: var(--color-bg-hover);
    --quote-table-header-bg: #F5F3EE;
    --quote-table-header-text: var(--color-text-secondary);
    --quote-table-border: var(--color-border-default);
    --quote-table-text: var(--color-text-primary);
    --quote-price-up: var(--color-market-up);
    --quote-price-down: var(--color-market-down);
    --quote-splitter-bg: var(--color-border-default);
    --quote-splitter-handle: var(--color-border-strong);
    --quote-row-alt-bg: #F9F8F5;
    --quote-row-hover-bg: var(--color-bg-hover);
}

[data-theme="dark"] {
    --quote-panel-bg: var(--color-bg-page);
    --quote-panel-surface: var(--color-bg-secondary);
    --quote-header-bg: var(--color-bg-tertiary);
    --quote-table-header-bg: var(--color-bg-tertiary);
    --quote-table-header-text: var(--color-text-secondary);
    --quote-table-border: var(--color-border-default);
    --quote-table-text: var(--color-text-primary);
    --quote-price-up: var(--color-market-up);
    --quote-price-down: var(--color-market-down);
    --quote-splitter-bg: var(--color-border-default);
    --quote-splitter-handle: var(--color-border-strong);
    --quote-row-alt-bg: var(--color-bg-secondary);
    --quote-row-hover-bg: var(--color-bg-hover);
}

/* ==========================================================================
   Layer 3: Component Tokens — 卡片
   ========================================================================== */
:root {
    --card-bg: var(--color-bg-secondary);
    --card-border: var(--color-border-default);
    --card-shadow: var(--shadow-sm);
    --card-hover-shadow: var(--shadow-md);
    --card-hover-border: var(--color-border-strong);
}

[data-theme="dark"] {
    --card-bg: var(--color-bg-secondary);
    --card-border: var(--color-border-default);
}

/* ==========================================================================
   Layer 3: Component Tokens — 按鈕
   ========================================================================== */
:root {
    /* 主要按鈕（品牌橘 CTA） */
    --btn-primary-bg: var(--color-accent);
    --btn-primary-bg-hover: var(--color-accent-hover);
    --btn-primary-text: var(--color-text-on-accent);
    --btn-primary-shadow: var(--shadow-accent);

    /* 次要按鈕（Stone） */
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--color-secondary-subtle);
    --btn-secondary-text: var(--color-secondary);
    --btn-secondary-border: var(--color-border-strong);

    /* Ghost 按鈕 */
    --btn-ghost-bg-hover: var(--color-bg-hover);
    --btn-ghost-text: var(--color-text-secondary);
}

/* ==========================================================================
   向後相容 Alias（舊 --brand-* 全部映射到新 token）
   確保零斷裂風險 — 所有現有引用繼續運作
   ========================================================================== */
:root {
    /* Logo 配置 */
    --logo-primary-color: var(--color-accent);
    --logo-text-color: var(--color-text-primary);
    --logo-slogan-color: var(--color-text-tertiary);

    /* 品牌配色 → 新 token */
    --brand-primary: var(--color-accent);
    --brand-primary-hover: var(--color-accent-hover);
    --brand-primary-light: var(--color-accent-subtle);

    /* 背景色 → 新 token */
    --brand-bg-primary: var(--color-bg-page);
    --brand-bg-secondary: var(--color-bg-secondary);
    --brand-bg-tertiary: var(--color-accent-subtle);
    --brand-bg-hover: var(--color-bg-hover);

    /* 文字色 → 新 token */
    --brand-text-primary: var(--color-text-primary);
    --brand-text-secondary: var(--color-text-secondary);
    --brand-text-muted: var(--color-text-muted);

    /* 功能色 → 新 token */
    --brand-success: var(--color-success);
    --brand-danger: var(--color-danger);
    --brand-warning: var(--color-warning);

    /* 陰影 → 新 token */
    --brand-shadow-sm: var(--shadow-sm);
    --brand-shadow-md: var(--shadow-md);
    --brand-shadow-lg: var(--shadow-lg);
    --brand-shadow-border: var(--shadow-border);

    /* 報價面板深色（向後相容，Phase 4 將移除） */
    --quote-dark-panel-bg: #0C0A09;
    --quote-dark-panel-surface: #1C1917;
    --quote-dark-table-header-bg: linear-gradient(180deg, #292524 0%, #1C1917 100%);
    --quote-dark-table-header-text: #ffffff;
    --quote-dark-table-border: rgba(255, 255, 255, 0.10);
    --quote-dark-table-text: #f5f5f5;
    --quote-dark-price-up: #FF4444;
    --quote-dark-price-down: #22C55E;
    --quote-dark-splitter-bg: rgba(255, 255, 255, 0.08);
    --quote-dark-splitter-handle: rgba(255, 255, 255, 0.16);
}

/* 深色主題的 alias 也需要正確映射 */
[data-theme="dark"],
.dark-mode {
    --brand-bg-primary: var(--color-bg-page);
    --brand-bg-secondary: var(--color-bg-secondary);
    --brand-bg-tertiary: var(--color-accent-muted);
    --brand-bg-hover: var(--color-bg-hover);
    --brand-text-primary: var(--color-text-primary);
    --brand-text-secondary: var(--color-text-secondary);
    --brand-text-muted: var(--color-text-muted);
    --brand-primary: var(--color-accent);
    --brand-primary-hover: var(--color-accent-hover);
    --brand-primary-light: var(--color-accent-subtle);
    --logo-text-color: var(--color-text-primary);
}

/* ==========================================================================
   字體系統
   ========================================================================== */
:root {
    --brand-font-family: 'Geist', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
    --brand-font-size-xs: 13px;
    --brand-font-size-sm: 14px;
    --brand-font-size-md: 16px;
    --brand-font-size-lg: 18px;
    --brand-font-size-xl: 24px;
    --brand-font-size-2xl: 32px;
}

/* ==========================================================================
   圓角系統
   ========================================================================== */
:root {
    --brand-radius-sm: 6px;
    --brand-radius-md: 12px;
    --brand-radius-lg: 20px;
    --brand-radius-xl: 28px;
    --brand-radius-full: 9999px;
}

/* ==========================================================================
   品牌元件樣式（Logo / Button / Card / Link）
   ========================================================================== */

/* Logo */
.brand-logo {
    color: var(--color-accent);
    filter: drop-shadow(0 2px 8px rgba(249, 115, 22, 0.3));
    animation: brandLogoGlow 4s ease-in-out infinite;
}

@keyframes brandLogoGlow {
    0%,
    100% {
        filter: drop-shadow(0 2px 8px rgba(249, 115, 22, 0.3));
    }

    50% {
        filter: drop-shadow(0 2px 12px rgba(249, 115, 22, 0.5));
    }
}

.brand-logo-text {
    font-family: var(--brand-font-family);
    font-weight: 700;
    color: var(--logo-text-color);
}

.brand-logo-slogan {
    font-family: var(--brand-font-family);
    font-size: var(--brand-font-size-sm);
    color: var(--logo-slogan-color);
}

/* 主要按鈕 */
.brand-btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-text-on-accent);
    border: none;
    border-radius: var(--brand-radius-lg);
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.brand-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.brand-btn-primary:active {
    transform: translateY(0);
}

/* 卡片 */
.brand-card {
    background: var(--card-bg);
    border-radius: var(--brand-radius-lg);
    padding: 24px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
}

/* 連結 */
.brand-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

.brand-link:hover {
    color: var(--color-accent-hover);
}