/* ================================================
   专业稳重配色方案 - 深蓝商务风
   ================================================ */

/* 基础配色变量定义 */
:root {
    /* 核心基底：中性色系统 */
    --color-light-gray-base: #F8FAFC;       /* 浅灰基底 - 主背景 */
    --color-light-gray-card: #F1F5F9;       /* 浅灰卡片 - 卡片背景 */
    --color-medium-gray: #E2E8F0;           /* 中灰 - 边框、分割线 */
    --color-dark-gray-neutral: #64748B;     /* 深灰中性 - 正文、次要标题 */
    --color-dark-gray-emphasis: #334155;    /* 深灰强调 - 主标题、重点文字 */

    /* 核心功能配色 - 深蓝主色调 */
    --color-primary-navy: #1e3a5f;          /* 深蓝主色 - 导航、页脚、主按钮 */
    --color-primary-navy-hover: #2d4a6f;    /* 深蓝hover色 */
    --color-primary-blue: #2563eb;          /* 标准蓝 - CTA、强调按钮 */
    --color-primary-blue-hover: #1d4ed8;    /* 标准蓝hover色 */
    --color-light-blue-bg: #EFF6FF;         /* 浅蓝背景 - 高亮区域 */

    /* 功能状态配色 */
    --color-success-green: #10b981;         /* 成功状态 */
    --color-warning-amber: #f59e0b;         /* 警告状态 */
    --color-error-red: #ef4444;             /* 危险操作 */

    /* 辅助点缀配色 */
    --color-slate-500: #64748b;             /* 次要文字 */
    --color-slate-400: #94a3b8;             /* 辅助文字 */
    --color-white: #ffffff;                 /* 纯白 */
}

/* ================================================
   全局样式覆盖 - 应用新配色方案
   ================================================ */

/* 全局背景 */
body {
    background-color: var(--color-light-gray-base);
    color: var(--color-dark-gray-emphasis);
}

/* 基础背景色 */
.bg-light-gray-base {
    background-color: var(--color-light-gray-base);
}

.bg-light-gray-card {
    background-color: var(--color-light-gray-card);
}

.bg-light-blue-bg {
    background-color: var(--color-light-blue-bg);
}

/* 文字颜色 */
.text-dark-gray-emphasis {
    color: var(--color-dark-gray-emphasis);
}

.text-dark-gray-neutral {
    color: var(--color-dark-gray-neutral);
}

.text-secondary-gray {
    color: var(--color-slate-500);
}

.text-primary-navy {
    color: var(--color-primary-navy);
}

.text-primary-blue {
    color: var(--color-primary-blue);
}

/* 边框颜色 */
.border-medium-gray {
    border-color: var(--color-medium-gray);
}

/* 主按钮样式 - 深蓝色 */
.btn-primary-navy {
    background-color: var(--color-primary-navy);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary-navy:hover {
    background-color: var(--color-primary-navy-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

/* 主按钮样式 - 标准蓝 */
.btn-primary-blue {
    background-color: var(--color-primary-blue);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary-blue:hover {
    background-color: var(--color-primary-blue-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* 边框按钮 */
.btn-outline-navy {
    background-color: transparent;
    color: var(--color-primary-navy);
    border: 1px solid var(--color-primary-navy);
    transition: all 0.3s ease;
}

.btn-outline-navy:hover {
    background-color: var(--color-primary-navy);
    color: white;
}

/* 卡片背景 */
.card-gray {
    background-color: var(--color-light-gray-card);
    border: 1px solid var(--color-medium-gray);
}

/* 输入框样式 */
.input-light-gray {
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    color: var(--color-dark-gray-emphasis);
}

.input-light-gray:focus {
    outline: none;
    border-color: var(--color-primary-navy);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* 状态提示颜色 */
.status-success {
    background-color: var(--color-success-green);
    color: white;
}

.status-warning {
    background-color: var(--color-warning-amber);
    color: white;
}

.status-danger {
    background-color: var(--color-error-red);
    color: white;
}

/* 渐变背景 */
.gradient-navy {
    background: linear-gradient(90deg, var(--color-primary-navy) 0%, var(--color-primary-navy-hover) 100%);
}

/* 链接样式 */
a {
    color: var(--color-primary-navy);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-navy-hover);
}

/* 导航链接 */
.nav-link-brown {
    color: var(--color-dark-brown-neutral);
    transition: all 0.3s ease;
}

.nav-link-brown:hover,
.nav-link-brown.active {
    color: var(--color-primary-caramel);
}

/* 滚动条样式更新 */
::-webkit-scrollbar-track {
    background: var(--color-light-brown-base);
}

::-webkit-scrollbar-thumb {
    background: var(--color-dark-brown-neutral);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-dark-brown-emphasis);
}

/* 分割线 */
.divider-brown {
    border-color: var(--color-medium-light-brown);
}

/* 表单标签 */
.form-label-brown {
    color: var(--color-dark-brown-neutral);
}

/* 选择框样式 */
.select-brown {
    background-color: white;
    border: 1px solid var(--color-medium-light-brown);
    color: var(--color-dark-brown-emphasis);
}

.select-brown:focus {
    border-color: var(--color-primary-caramel);
    box-shadow: 0 0 0 3px rgba(184, 138, 101, 0.1);
}

/* 徽章/标签样式 */
.badge-caramel {
    background-color: var(--color-primary-caramel);
    color: white;
}

.badge-apricot {
    background-color: var(--color-warm-apricot);
    color: #5a3d2b;
}

.badge-olive {
    background-color: var(--color-light-olive-green);
    color: #2d4a3e;
}

/* 阴影效果 - 暖色调阴影 */
.shadow-warm {
    box-shadow: 0 4px 6px -1px rgba(109, 97, 85, 0.1), 0 2px 4px -1px rgba(109, 97, 85, 0.06);
}

.shadow-warm-lg {
    box-shadow: 0 10px 15px -3px rgba(109, 97, 85, 0.1), 0 4px 6px -2px rgba(109, 97, 85, 0.05);
}

/* 悬停放大效果 */
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(109, 97, 85, 0.1), 0 10px 10px -5px rgba(109, 97, 85, 0.04);
}

/* 响应式适配 */
@media (max-width: 768px) {
    /* 移动端额外优化 */
    .mobile-padding-adjust {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 暗色模式适配（可选）*/
@media (prefers-color-scheme: dark) {
    .dark-mode-auto {
        --color-light-brown-base: #2D2924;
        --color-light-brown-gray: #3A3630;
        --color-medium-light-brown: #4A4640;
        --color-dark-brown-neutral: #B8A999;
        --color-dark-brown-emphasis: #D4C4B0;
    }
}