/* 
 * 统一颜色变量管理文件
 * 用于规范化项目中的所有颜色使用
 * 支持主题切换和颜色统一管理
 */

:root {
    /* ===== 主题色系 ===== */
    --color-primary: #5d7eeb;
    --color-primary-50: #f0f3ff;
    --color-primary-100: #e1e8ff;
    --color-primary-200: #c3d1ff;
    --color-primary-300: #a5baff;
    --color-primary-400: #87a3ff;
    --color-primary-500: #5d7eeb;
    --color-primary-600: #4a63bc;
    --color-primary-700: #38488d;
    --color-primary-800: #252d5e;
    --color-primary-900: #13122f;

    /* 主题色透明度变体 */
    --color-primary-light: rgba(93, 126, 235, 0.1);
    --color-primary-medium: rgba(93, 126, 235, 0.15);
    --color-primary-dark: rgba(93, 126, 235, 0.8);

    /* ===== 语义化颜色 ===== */
    --color-success: #07c160;
    --color-success-50: #f0f9f0;
    --color-success-100: #e1f5e1;
    --color-success-200: #c3ebc3;
    --color-success-300: #a5e1a5;
    --color-success-400: #87d787;
    --color-success-500: #07c160;
    --color-success-600: #059a4c;
    --color-success-700: #047338;
    --color-success-800: #024c24;
    --color-success-900: #012510;
    --color-success-light: rgba(7, 193, 96, 0.1);
    --color-success-dark: rgba(7, 193, 96, 0.8);

    --color-warning: #ff976a;
    --color-warning-50: #fff5f0;
    --color-warning-100: #ffebe1;
    --color-warning-200: #ffd7c3;
    --color-warning-300: #ffc3a5;
    --color-warning-400: #ffaf87;
    --color-warning-500: #ff976a;
    --color-warning-600: #cc7955;
    --color-warning-700: #995b40;
    --color-warning-800: #663d2a;
    --color-warning-900: #331f15;
    --color-warning-light: rgba(255, 151, 106, 0.1);
    --color-warning-dark: rgba(255, 151, 106, 0.8);

    --color-danger: #ee0a24;
    --color-danger-light: rgba(238, 10, 36, 0.1);
    --color-danger-dark: rgba(238, 10, 36, 0.8);

    --color-info: #1989fa;
    --color-info-light: rgba(25, 137, 250, 0.1);
    --color-info-dark: rgba(25, 137, 250, 0.8);

    /* ===== 中性色系 ===== */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;

    /* ===== 文本颜色 ===== */
    --color-text-primary: #323233;
    --color-text-secondary: #646566;
    --color-text-tertiary: #969799;
    --color-text-quaternary: #c8c9cc;
    --color-text-disabled: #c8c9cc;
    --color-text-white: #ffffff;

    /* ===== 背景颜色 ===== */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f8f8f8;
    --color-bg-quaternary: #f2f3f5;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    --color-bg-mask: rgba(0, 0, 0, 0.8);

    /* ===== 边框颜色 ===== */
    --color-border-primary: #ebedf0;
    --color-border-secondary: #f2f3f5;
    --color-border-tertiary: #dcdee0;
    --color-border-focus: var(--color-primary);

    /* ===== 状态颜色 ===== */
    --color-active: #f2f3f5;
    --color-hover: rgba(0, 0, 0, 0.05);
    --color-focus: var(--color-primary-light);

    /* ===== 阴影颜色 ===== */
    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-medium: rgba(0, 0, 0, 0.15);
    --color-shadow-dark: rgba(0, 0, 0, 0.2);

    /* ===== 业务特定颜色 ===== */
    --color-service-personal: #5d7eeb; /* 个人大数据 */
    --color-service-company: #6b9df9; /* 小微企业 */
    --color-service-loan: #e1a0e4; /* 贷前风险 */

    /* ===== 渐变色彩 ===== */
    --gradient-primary: linear-gradient(
        135deg,
        var(--color-primary-400),
        var(--color-primary-600)
    );
    --gradient-success: linear-gradient(
        135deg,
        var(--color-success),
        var(--color-success-dark)
    );
    --gradient-warning: linear-gradient(
        135deg,
        var(--color-warning),
        var(--color-warning-dark)
    );
    --gradient-danger: linear-gradient(
        135deg,
        var(--color-danger),
        var(--color-danger-dark)
    );
}

/* ===== 暗色主题支持 ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #ffffff;
        --color-text-secondary: #e5e5e5;
        --color-text-tertiary: #a3a3a3;
        --color-text-quaternary: #737373;

        --color-bg-primary: #1a1a1a;
        --color-bg-secondary: #262626;
        --color-bg-tertiary: #404040;
        --color-bg-quaternary: #525252;

        --color-border-primary: #404040;
        --color-border-secondary: #525252;
        --color-border-tertiary: #737373;
    }
}

/* ===== 工具类 ===== */
.text-primary {
    color: var(--color-primary) !important;
}
.text-success {
    color: var(--color-success) !important;
}
.text-warning {
    color: var(--color-warning) !important;
}
.text-danger {
    color: var(--color-danger) !important;
}
.text-info {
    color: var(--color-info) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}
.bg-success {
    background-color: var(--color-success) !important;
}
.bg-warning {
    background-color: var(--color-warning) !important;
}
.bg-danger {
    background-color: var(--color-danger) !important;
}
.bg-info {
    background-color: var(--color-info) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}
.border-success {
    border-color: var(--color-success) !important;
}
.border-warning {
    border-color: var(--color-warning) !important;
}
.border-danger {
    border-color: var(--color-danger) !important;
}
.border-info {
    border-color: var(--color-info) !important;
}

/* ===== 响应式颜色工具类 ===== */
@media (max-width: 768px) {
    .text-primary-mobile {
        color: var(--color-primary) !important;
    }
    .bg-primary-mobile {
        background-color: var(--color-primary) !important;
    }
}