/**
 * 主題與配色引擎 (theme.css)
 * 嚴格依據 Ref(參考)/深淺顏色.md 定義之色彩碼規範
 */

:root {
    /* ☀️ 預設淺色模式 (Light Mode) */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --card-bg: #FFFFFF;
    --card-hover-bg: #F1F3F4;
    --text-primary: #202124;
    --text-secondary: #5F6368;
    --divider: #DADCE0;
    --border-color: #DADCE0;

    /* 品牌強調色 */
    --brand-primary: #1A73E8;
    --brand-hover: #1557B0;
    --brand-light: #E8F0FE;
    --brand-badge: #1A73E8;

    /* 狀態輔助色 */
    --color-success: #34A853;
    --color-warning: #FBBC04;
    --color-danger: #EA4335;

    /* 陰影 */
    --shadow-sm: 0 1px 3px rgba(32, 33, 36, 0.08);
    --shadow-md: 0 4px 12px rgba(32, 33, 36, 0.1);
    --shadow-lg: 0 8px 24px rgba(32, 33, 36, 0.12);

    /* 圓角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* 動態切換過渡 */
    --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* 🌙 深色模式 (Dark Mode) */
[data-theme="dark"] {
    --bg-primary: #202124;
    --bg-secondary: #303134;
    --card-bg: #292A2D;
    --card-hover-bg: #35363A;
    --text-primary: #E8EAED;
    --text-secondary: #BDC1C6;
    --divider: #5F6368;
    --border-color: #3C4043;

    /* 品牌強調色 (深色模式增強對比) */
    --brand-primary: #8AB4F8;
    --brand-hover: #AECBFA;
    --brand-light: rgba(138, 180, 248, 0.12);
    --brand-badge: #8AB4F8;

    /* 狀態輔助色 */
    --color-success: #81C995;
    --color-warning: #FDD663;
    --color-danger: #F28B82;

    /* 陰影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 系統偏好深色模式自動適配 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #202124;
        --bg-secondary: #303134;
        --card-bg: #292A2D;
        --card-hover-bg: #35363A;
        --text-primary: #E8EAED;
        --text-secondary: #BDC1C6;
        --divider: #5F6368;
        --border-color: #3C4043;

        --brand-primary: #8AB4F8;
        --brand-hover: #AECBFA;
        --brand-light: rgba(138, 180, 248, 0.12);
        --brand-badge: #8AB4F8;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}