/* ========================================================================
   ✨ CSS 變數定義 (統一管理顏色、間距、字體大小等)
   ======================================================================== */
:root {
    /* 顏色系統 */
    --color-bg-primary: #252540;
    --color-bg-secondary: #333;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    --color-bg-overlay-dark: rgba(0, 0, 0, 0.85);
    --color-text-primary: #ffffff;
    --color-text-secondary: #333;
    --color-text-shadow: #1c2541;
    --color-accent-pink: #f72585;
    --color-accent-blue: #4361ee;
    --color-accent-yellow: #ffca3a;
    --color-accent-cyan: #00b4d8;
    --color-accent-green: #2a9d8f;
    --color-accent-red: #e63946;
    --color-accent-orange: #ff8c00;
    --color-accent-light-green: #9ef01a;
    --color-accent-light-red: #ff4d6d;
    --color-accent-water-blue: #287fa8;
    --color-button-gray: #888;
    --color-button-gray-text: #ccc;
    --color-primary: #4361ee;
    --color-primary-dark: #3451de;

    /* 間距系統 */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 50px;

    /* 字體大小系統 */
    --font-size-xs: 0.8em;
    --font-size-sm: 0.9em;
    --font-size-base: 1em;
    --font-size-md: 1.1em;
    --font-size-lg: 1.2em;
    --font-size-xl: 1.5em;
    --font-size-xxl: 1.8em;

    /* 圓角系統 */
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-xl: 15px;
    --border-radius-full: 50%;

    /* 陰影系統 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 5px 20px rgba(255, 255, 255, 0.3);
    --shadow-glow: 0 0 10px rgba(247, 37, 133, 0.5);

    /* 過渡動畫 */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* Z-index 層級 */
    --z-index-base: 100;
    --z-index-modal: 1000;
    --z-index-modal-high: 2000;
    --z-index-loading: 9999;
}

/* 行動裝置變數覆蓋 */
@media (max-width: 767px) {
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --font-size-base: 0.95em;
        --font-size-md: 1em;
        --font-size-lg: 1.1em;
        --font-size-xl: 1.3em;
        --font-size-xxl: 1.6em;
    }
}