/**
 * 品牌配色CSS变量
 * 用于支持代理商白标化
 * 
 * 默认配色：青色#06ebe4 + 洋红色#f56fac + 深色背景#101c22
 */

:root {
    /* 主色调（青色） */
    --color-primary: #06ebe4;
    --color-primary-hover: #05d4cc;
    --color-primary-light: #8ff4f0;
    --color-primary-dark: #04b8b1;
    --color-primary-rgb: 6, 235, 228;
    
    /* 辅色调（洋红色） */
    --color-secondary: #f56fac;
    --color-secondary-hover: #f44d9b;
    --color-secondary-light: #f9a5cf;
    --color-secondary-dark: #d94a8a;
    --color-secondary-rgb: 245, 111, 172;
    
    /* 背景色（深色） */
    --color-background: #101c22;
    --color-background-rgb: 16, 28, 34;
    --color-background-light: #1a2832;
    --color-background-dark: #0a1216;
    
    /* 卡片背景色（比页面背景稍亮，用于产品信息窗口等） */
    --color-card-bg: #242b3d;
    --color-card-inner-bg: #1e2433;
    --color-card-border: #2f3747;
    
    /* Tailwind兼容别名 */
    --color-cyan-400: var(--color-primary);
    --color-cyan-500: var(--color-primary-hover);
    --color-cyan-600: var(--color-primary-dark);
    
    --color-pink-400: var(--color-secondary);
    --color-pink-500: var(--color-secondary-hover);
    --color-pink-600: var(--color-secondary-dark);
    
    /* 渐变色 */
    --gradient-primary: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    --gradient-primary-hover: linear-gradient(to right, var(--color-primary-hover), var(--color-secondary-hover));
}

/* 应用CSS变量到现有类 */

/* 按钮渐变 */
.bg-gradient-to-r.from-cyan-400.to-pink-400 {
    background: var(--gradient-primary) !important;
}

.hover\:from-cyan-500:hover.hover\:to-pink-500:hover {
    background: var(--gradient-primary-hover) !important;
}

/* 文字颜色 */
.text-\[\#06ebe4\] {
    color: var(--color-primary) !important;
}

.text-\[\#f56fac\] {
    color: var(--color-secondary) !important;
}

/* 背景色 */
.bg-\[\#06ebe4\] {
    background-color: var(--color-primary) !important;
}

.bg-\[\#f56fac\] {
    background-color: var(--color-secondary) !important;
}

/* Hover背景色 */
.hover\:bg-\[\#06ebe4\]\/90:hover {
    background-color: var(--color-primary-hover) !important;
}

.hover\:bg-\[\#f56fac\]\/90:hover {
    background-color: var(--color-secondary-hover) !important;
}

/* Toast组件配色 */
.bg-gradient-to-r.from-cyan-500.to-cyan-600 {
    background: linear-gradient(to right, var(--color-primary-hover), var(--color-primary-dark)) !important;
}

.bg-gradient-to-r.from-pink-500.to-pink-600 {
    background: linear-gradient(to right, var(--color-secondary-hover), var(--color-secondary-dark)) !important;
}

/* Tailwind primary/secondary 映射 */
.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-primary\/20, .bg-primary\/10 {
    background-color: rgba(var(--color-primary-rgb), 0.2) !important;
}

.bg-secondary\/20, .bg-secondary\/10 {
    background-color: rgba(var(--color-secondary-rgb), 0.2) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}

/* hover 状态覆盖 */
.hover\:border-secondary\/50:hover {
    border-color: rgba(var(--color-secondary-rgb), 0.5) !important;
}

.hover\:border-primary\/50:hover {
    border-color: rgba(var(--color-primary-rgb), 0.5) !important;
}

.hover\:text-primary:hover {
    color: var(--color-primary) !important;
}

.hover\:text-secondary:hover {
    color: var(--color-secondary) !important;
}

/* 渐变按钮 */
.bg-gradient-to-r.from-primary.to-secondary {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
}

/* 首页模块背景 */
.bg-slate-100 {
    background-color: var(--color-background-light, #1a2832) !important;
}

.dark\:bg-slate-900 {
    background-color: var(--color-background, #101c22) !important;
}

/* 背景色类覆盖 - 统一使用主背景色 */
.bg-background-light {
    background-color: var(--color-background, #101c22) !important;
}

.bg-background-dark, .dark\:bg-background-dark {
    background-color: var(--color-background, #101c22) !important;
}

/* 卡片背景色类 */
.bg-card-bg {
    background-color: var(--color-card-bg, #242b3d) !important;
}

.bg-card-inner {
    background-color: var(--color-card-inner-bg, #1e2433) !important;
}

.border-card-border {
    border-color: var(--color-card-border, #2f3747) !important;
}

/* hover状态的卡片边框 */
.hover\:border-card-border:hover {
    border-color: var(--color-card-border, #4a5568) !important;
}

/* focus状态的卡片输入框 */
.focus\:bg-card-inner:focus {
    background-color: var(--color-card-inner-bg, #252c3d) !important;
}

/* 页脚背景 - 与页面背景一致 */
footer, .footer {
    background-color: var(--color-background, #101c22) !important;
}

/* 侧边栏选中状态 */
.sidebar-link.active {
    background-color: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-primary) !important;
    border-left-color: var(--color-primary) !important;
}

.sidebar-link.active .material-symbols-outlined {
    color: var(--color-primary) !important;
}

/* Tab选中状态 */
.border-primary {
    border-color: var(--color-primary) !important;
}