/* 基礎樣式 - Base Styles */

/* 導入二次元風格字體 */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru:wght@400&family=Noto+Color+Emoji&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&display=swap');

/* CSS 變量定義 - 淺色模式 */
:root {
    /* 主色調 - 動態主題色（由ThemeManager控制） */
    --primary-color: #0ea5e9;
    --primary-color-rgb: 14, 165, 233;
    --primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --secondary-color: #0284c7;
    --accent-color: #38bdf8;
    
    /* 中性色 */
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #999;
    --background-light: #f8f9fa;
    --background-white: #ffffff;
    --background-dark: #f3f4f6;
    --border-color: #e1e5e9;
    
    /* 卡片背景 */
    --card-bg: #ffffff;
    --card-bg-dark: #f8f9fa;
    
    /* 狀態色 */
    --success-color: #28a745;
    --success-bg: #d4edda;
    --warning-color: #856404;
    --warning-bg: #fff3cd;
    --danger-color: #721c24;
    --danger-bg: #f8d7da;
    
    /* 邊框半徑 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* 陰影 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --shadow-light: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-dark: 0 4px 6px rgba(0,0,0,0.15);
    
    /* 間距 - 優化緊湊佈局 */
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 14px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
}

/* 深色模式變量 */
@media (prefers-color-scheme: dark) {
    :root {
        /* 主色調保持動態，但在深色模式下稍微調亮 */
        /* 主色調由ThemeManager動態控制，這裡只調整亮度 */
        filter: brightness(1.1);
        
        /* 中性色 - 深色模式 */
        --text-primary: #e4e6ea;
        --text-secondary: #b0b3b8;
        --text-light: #8a8d91;
        --background-light: #242526;
        --background-white: #18191a;
        --background-dark: #242526;
        --border-color: #3a3b3c;
        
        /* 卡片背景 - 深色模式 */
        --card-bg: #242526;
        --card-bg-dark: #18191a;
        
        /* 狀態色 - 深色模式適配 */
        --success-color: #42b883;
        --success-bg: #1e3a32;
        --warning-color: #f1c40f;
        --warning-bg: #3d3a1e;
        --danger-color: #e74c3c;
        --danger-bg: #3d1e1e;
        
        /* 陰影 - 深色模式下更明顯 */
        --shadow-sm: 0 2px 8px 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);
        --shadow-light: 0 2px 8px rgba(255,255,255,0.1);
        --shadow-dark: 0 4px 12px rgba(0,0,0,0.4);
    }
}

/* 手動淺色模式類 */
[data-theme="light"] {
    /* 主色調由ThemeManager動態控制 */
    --primary-color: #0ea5e9;
    --primary-color-rgb: 14, 165, 233;
    --primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --secondary-color: #0284c7;
    
    /* 中性色 - 淺色模式 */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --background-light: #f9fafb;
    --background-white: #ffffff;
    --background-dark: #f3f4f6;
    --border-color: #e5e7eb;
    
    /* 卡片背景 */
    --card-bg: #ffffff;
    --card-bg-dark: #f8f9fa;
    
    /* 狀態色 */
    --success-color: #10b981;
    --success-bg: #d1fae5;
    --warning-color: #f59e0b;
    --warning-bg: #fef3c7;
    --danger-color: #ef4444;
    --danger-bg: #fee2e2;
}

/* 手動深色模式類 */
[data-theme="dark"] {
    /* 主色調 - 企鵝主題藍色系（手動深色模式） */
    --primary-color: #38bdf8;
    --primary-color-rgb: 56, 189, 248;
    --primary-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    --secondary-color: #0ea5e9;
    
    /* 中性色 - 深色模式 */
    --text-primary: #e4e6ea;
    --text-secondary: #b0b3b8;
    --text-light: #8a8d91;
    --background-light: #242526;
    --background-white: #18191a;
    --background-dark: #242526;
    --border-color: #3a3b3c;
    
    /* 卡片背景 - 深色模式 */
    --card-bg: #242526;
    --card-bg-dark: #18191a;
    
    /* 狀態色 - 深色模式適配 */
    --success-color: #42b883;
    --success-bg: #1e3a32;
    --warning-color: #f1c40f;
    --warning-bg: #3d3a1e;
    --danger-color: #e74c3c;
    --danger-bg: #3d1e1e;
    
    /* 邊框半徑 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* 陰影 - 深色模式下更明顯 */
    --shadow-sm: 0 2px 8px 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);
    --shadow-light: 0 2px 8px rgba(255,255,255,0.1);
    --shadow-dark: 0 4px 12px rgba(0,0,0,0.4);
    
    /* 間距 - 與淺色模式保持一致 */
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 14px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
}

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基礎字體和背景 */
body {
    font-family: 'M PLUS Rounded 1c', 'Kosugi Maru', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    background: var(--primary-gradient);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 400;
}

/* 主容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* 隱藏類 */
.hidden {
    display: none;
}

/* 動畫效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 載入動畫 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}