/**
 * 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;

    /* 模組專屬色彩 */
    /* 崗位基礎資料 - 藍色 (Primary) */
    --module-position: #1a5276;
    --module-position-dark: #0e3a53;
    --module-position-shadow: rgba(26, 82, 118, 0.4);

    /* 職務基礎資料 - 橘色 */
    --module-job: #e67e22;
    --module-job-dark: #d35400;
    --module-job-shadow: rgba(230, 126, 34, 0.4);

    /* 部門職責 - 紫色 */
    --module-deptfunc: #8b5cf6;
    --module-deptfunc-dark: #6d28d9;
    --module-deptfunc-shadow: rgba(139, 92, 246, 0.4);

    /* 崗位描述 - 綠色 */
    --module-desc: #27ae60;
    --module-desc-dark: #1e8449;
    --module-desc-shadow: rgba(39, 174, 96, 0.4);

    /* 崗位清單 - 青色 */
    --module-list: #14b8a6;
    --module-list-dark: #0d9488;
    --module-list-shadow: rgba(20, 184, 166, 0.4);

    /* 管理者頁面 - 玫紅色 */
    --module-admin: #f43f5e;
    --module-admin-dark: #e11d48;
    --module-admin-shadow: rgba(244, 63, 94, 0.4);

    /* 背景色 */
    --bg: #f4f6f9;
    --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);
    }
}