/* ============================================ 
   国际贸易主题配色方案
   Trade Theme Color Scheme
   
   主色调：深蓝色系 - 代表专业、信任、海洋
   辅助色：金色 - 代表财富、成功
   点缀色：绿色 - 代表增长、可持续性
   中性色：白色、浅灰 - 代表专业、干净
   ============================================ */

:root {
    /* 主色调 - 深蓝色系 */
    --trade-primary: #1565C0;
    --trade-primary-light: #0EA5E9;
    --trade-primary-lighter: #7DD3FC;
    --trade-primary-lightest: #E0F2FE;
    
    /* 辅助色 - 金色 */
    --trade-gold: #F59E0B;
    --trade-gold-light: #FBBF24;
    --trade-gold-lighter: #FEF3C7;
    
    /* 点缀色 - 绿色 */
    --trade-green: #10B981;
    --trade-green-light: #34D399;
    
    /* 新增辅助色 - 紫色 */
    --trade-purple: #8B5CF6;
    --trade-purple-light: #A78BFA;
    
    /* 新增辅助色 - 珊瑚色 */
    --trade-coral: #F472B6;
    --trade-coral-light: #F9A8D4;
    
    /* 中性色 */
    --trade-white: #FFFFFF;
    --trade-gray-light: #F8FAFC;
    --trade-gray: #E2E8F0;
    --trade-gray-dark: #64748B;
    --trade-black: #1E293B;
    
    /* 功能色 */
    --trade-success: #10B981;
    --trade-warning: #F59E0B;
    --trade-danger: #EF4444;
    --trade-info: #0EA5E9;
    
    /* 纯色替代渐变（外贸专业风格） */
    --trade-gradient-primary: #0369A1;
    --trade-gradient-gold: #F59E0B;
    --trade-gradient-blue: #7DD3FC;
    --trade-gradient-purple: #8B5CF6;
    --trade-gradient-green: #10B981;
}

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    background: var(--trade-gray-light);
    color: var(--trade-black);
    line-height: 1.6;
    min-height: 100vh;
}

/* 按钮 - 使用贸易主题色 */
.el-button--primary {
    background: var(--trade-primary) !important;
    border-color: var(--trade-primary) !important;
}

.el-button--primary:hover {
    background: var(--trade-primary-light) !important;
    border-color: var(--trade-primary-light) !important;
}

/* 登录页面 - 贸易主题覆盖 */
.login-container {
    background: var(--trade-white);
    box-shadow: 0 20px 60px rgba(10, 61, 98, 0.15);
    border: 1px solid var(--trade-gray);
}

.login-tab.active {
    background: var(--trade-primary);
    color: var(--trade-white);
}

/* 通用卡片淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeIn 0.3s ease-out;
}

.stat-card {
    animation: fadeIn 0.5s ease-out;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--trade-gray-light);
}

::-webkit-scrollbar-thumb {
    background: var(--trade-primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--trade-primary);
}