/**
 * Base Styles - 基礎樣式
 * 包含 CSS 變數定義、CSS Reset、全域樣式
 */

/* ==================== CSS Variables ==================== */
:root {
    /* 主題色 */
    --primary: #1a5276;
    --primary-light: #2980b9;
    --primary-dark: #0e3a53;
    --accent: #e67e22;
    --accent-light: #f39c12;
    --green: #27ae60;
    --green-dark: #1e8449;

    /* 背景色 */
    --bg-main: #f4f6f9;
    --bg-card: #ffffff;
    --border: #d5dbdf;

    /* 文字顏色 */
    --text-primary: #2c3e50;
    --text-secondary: #5d6d7e;

    /* 語義化顏色 */
    --success: #27ae60;
    --warning: #f39c12;
    --danger: #e74c3c;

    /* 陰影與圓角 */
    --shadow: 0 4px 20px rgba(26, 82, 118, 0.12);
    --radius: 8px;
}

/* ==================== CSS Reset ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== Global Styles ==================== */
body {
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #e8f4fc 0%, #f4f6f9 100%);
    min-height: 100vh;
    color: var(--text-primary);
}

/* ==================== Animations ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}