/**
 * 24节气自动配色系统CSS
 * 量子资管品牌专属
 */

:root {
    /* 固定核心品牌色（永远不变，保持品牌识别） */
    --brand-primary: #206864;      /* 主色·深青绿 */
    --brand-accent: #E67333;       /* 强调色·橙红 */
    --brand-gold: #FAC03D;         /* 品牌金·金黄 */
    --brand-cyan: #87ABDA;         /* 科技色·天蓝 */
    --brand-purple: #4A4B9D;       /* 辅助色·深蓝紫 */
    --brand-teal: #5AA4AE;         /* 辅助色·青蓝 */
    --brand-coral: #F29A76;        /* 辅助色·珊瑚橙 */
    
    /* 节气动态变化色（自动更新） */
    --brand-bg: #E0E0D0;           /* 背景色（随节气变化） */
    --brand-accent-light: #E0E0D020; /* 浅强调色（随节气变化） */
}

/* 全局应用节气配色（深色模式适配） */
body {
    /* 在深色背景上叠加节气色调，保留深色主题的同时透出节气氛围 */
    background: linear-gradient(rgba(10,10,15,0.9), rgba(10,10,15,0.9)), var(--brand-bg, #0a0a0f) !important;
    background-blend-mode: overlay;
}

/* 卡片背景动态变化 */
.card {
    background-color: rgba(15,23,42,0.85) !important;
    border-color: var(--brand-accent-light) !important;
}

/* 按钮悬停动态变化 */
.btn:hover {
    border-color: var(--brand-accent) !important;
}

/* 输入框聚焦动态变化 */
input:focus {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 3px var(--brand-accent-light) !important;
}

/* 强调色文字 */
.brand-accent {
    color: var(--brand-accent) !important;
}

/* 高亮数字 */
.highlight-number {
    color: var(--brand-accent3, var(--brand-gold)) !important;
}

/* 高亮区块动态变化 */
.bg-brand-light\/10,
.bg-\[\#E0E0D0\]\/10,
.bg-\[\#E0E0D0\]\/20,
.bg-\[\#E0E0D0\]\/30 {
    background-color: var(--brand-accent-light) !important;
}

/* 节气选择器样式 */
.jieqi-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.jieqi-item {
    padding: 8px 6px;
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    background: rgba(30,41,59,0.5);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.jieqi-item:hover {
    border-color: var(--brand-accent);
}

.jieqi-item.active {
    background: var(--brand-accent-light);
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}

.jieqi-reset-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: rgba(30,41,59,0.5);
    border: 1px solid rgba(100,116,139,0.3);
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.jieqi-reset-btn:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}