/**
 * 主题系统 - 支持一键切换整个风格色系
 * 通过修改 :root 选择器或添加主题类来实现主题切换
 */

/* ========================================
   默认主题 (当前主题)
   ======================================== */
:root {
    /* 主题标识 */
    --theme-name: 'default';
    --theme-version: '1.0';
    
    /* 主色调变量 - 基于这些变量计算所有其他颜色 */
    --theme-primary-h: 207;      /* 色相 */
    --theme-primary-s: 70%;      /* 饱和度 */
    --theme-primary-l: 53%;      /* 亮度 */
    
    --theme-success-h: 145;
    --theme-success-s: 60%;
    --theme-success-l: 50%;
    
    --theme-warning-h: 38;
    --theme-warning-s: 95%;
    --theme-warning-l: 50%;
    
    --theme-danger-h: 6;
    --theme-danger-s: 78%;
    --theme-danger-l: 57%;
    
    --theme-info-h: 207;
    --theme-info-s: 70%;
    --theme-info-l: 53%;
    
    /* 中性色变量 */
    --theme-gray-h: 210;
    --theme-gray-s: 20%;
    --theme-gray-l-base: 50%;
    
    /* 基于主题变量计算的颜色 */
    --primary: hsl(var(--theme-primary-h), var(--theme-primary-s), var(--theme-primary-l));
    --primary-light: hsl(var(--theme-primary-h), var(--theme-primary-s), 63%);
    --primary-dark: hsl(var(--theme-primary-h), var(--theme-primary-s), 38%);
    
    --success: hsl(var(--theme-success-h), var(--theme-success-s), var(--theme-success-l));
    --success-light: hsl(var(--theme-success-h), var(--theme-success-s), 65%);
    --success-dark: hsl(var(--theme-success-h), var(--theme-success-s), 40%);
    
    --warning: hsl(var(--theme-warning-h), var(--theme-warning-s), var(--theme-warning-l));
    --warning-light: hsl(var(--theme-warning-h), var(--theme-warning-s), 65%);
    --warning-dark: hsl(var(--theme-warning-h), var(--theme-warning-s), 40%);
    
    --danger: hsl(var(--theme-danger-h), var(--theme-danger-s), var(--theme-danger-l));
    --danger-light: hsl(var(--theme-danger-h), var(--theme-danger-s), 72%);
    --danger-dark: hsl(var(--theme-danger-h), var(--theme-danger-s), 47%);
    
    --info: hsl(var(--theme-info-h), var(--theme-info-s), var(--theme-info-l));
    --info-light: hsl(var(--theme-info-h), var(--theme-info-s), 73%);
    --info-dark: hsl(var(--theme-info-h), var(--theme-info-s), 43%);
    
    /* 中性色基于主题色计算 */
    --gray-50: hsl(var(--theme-gray-h), var(--theme-gray-s), 98%);
    --gray-100: hsl(var(--theme-gray-h), var(--theme-gray-s), 95%);
    --gray-200: hsl(var(--theme-gray-h), var(--theme-gray-s), 90%);
    --gray-300: hsl(var(--theme-gray-h), var(--theme-gray-s), 85%);
    --gray-400: hsl(var(--theme-gray-h), var(--theme-gray-s), 70%);
    --gray-500: hsl(var(--theme-gray-h), var(--theme-gray-s), 55%);
    --gray-600: hsl(var(--theme-gray-h), var(--theme-gray-s), 40%);
    --gray-700: hsl(var(--theme-gray-h), var(--theme-gray-s), 25%);
    --gray-800: hsl(var(--theme-gray-h), var(--theme-gray-s), 15%);
    
    /* 业务特定颜色基于主题色计算 */
    --priority-high-bg: hsl(var(--theme-danger-h), 20%, 98%);
    --priority-medium-bg: hsl(var(--theme-warning-h), 20%, 98%);
    --priority-low-bg: hsl(var(--theme-info-h), 20%, 98%);
    
    --status-pending-bg: hsl(var(--theme-warning-h), 30%, 95%);
    --status-pending-color: hsl(var(--theme-warning-h), 60%, 30%);
    --status-progress-bg: hsl(var(--theme-info-h), 30%, 95%);
    --status-progress-color: hsl(var(--theme-info-h), 60%, 30%);
    --status-completed-bg: hsl(var(--theme-success-h), 30%, 95%);
    --status-completed-color: hsl(var(--theme-success-h), 60%, 30%);
    --status-cancelled-bg: hsl(var(--theme-danger-h), 30%, 95%);
    --status-cancelled-color: hsl(var(--theme-danger-h), 60%, 30%);
    --status-hold-bg: hsl(var(--theme-gray-h), 10%, 90%);
    --status-hold-color: hsl(var(--theme-gray-h), 20%, 30%);
    
    --card-title-color: var(--gray-600);
    --card-label-color: var(--gray-500);
    --card-hint-color: var(--gray-500);
    
    --border-color-light: var(--gray-200);
    --border-color-base: var(--gray-300);
    --border-color-dark: var(--gray-400);
}

/* ========================================
   深色主题
   ======================================== */
[data-theme="dark"] {
    --theme-name: 'dark';
    
    /* 深色主题的主色调调整 */
    --theme-primary-l: 60%;
    --theme-success-l: 55%;
    --theme-warning-l: 55%;
    --theme-danger-l: 60%;
    --theme-info-l: 60%;
    
    /* 深色主题的中性色 */
    --gray-50: hsl(var(--theme-gray-h), var(--theme-gray-s), 8%);
    --gray-100: hsl(var(--theme-gray-h), var(--theme-gray-s), 12%);
    --gray-200: hsl(var(--theme-gray-h), var(--theme-gray-s), 18%);
    --gray-300: hsl(var(--theme-gray-h), var(--theme-gray-s), 25%);
    --gray-400: hsl(var(--theme-gray-h), var(--theme-gray-s), 40%);
    --gray-500: hsl(var(--theme-gray-h), var(--theme-gray-s), 55%);
    --gray-600: hsl(var(--theme-gray-h), var(--theme-gray-s), 70%);
    --gray-700: hsl(var(--theme-gray-h), var(--theme-gray-s), 85%);
    --gray-800: hsl(var(--theme-gray-h), var(--theme-gray-s), 95%);
    
    /* 深色主题的业务颜色调整 */
    --priority-high-bg: hsl(var(--theme-danger-h), 30%, 15%);
    --priority-medium-bg: hsl(var(--theme-warning-h), 30%, 15%);
    --priority-low-bg: hsl(var(--theme-info-h), 30%, 15%);
    
    --status-pending-bg: hsl(var(--theme-warning-h), 40%, 20%);
    --status-pending-color: hsl(var(--theme-warning-h), 70%, 70%);
    --status-progress-bg: hsl(var(--theme-info-h), 40%, 20%);
    --status-progress-color: hsl(var(--theme-info-h), 70%, 70%);
    --status-completed-bg: hsl(var(--theme-success-h), 40%, 20%);
    --status-completed-color: hsl(var(--theme-success-h), 70%, 70%);
    --status-cancelled-bg: hsl(var(--theme-danger-h), 40%, 20%);
    --status-cancelled-color: hsl(var(--theme-danger-h), 70%, 70%);
    --status-hold-bg: hsl(var(--theme-gray-h), 15%, 20%);
    --status-hold-color: hsl(var(--theme-gray-h), 30%, 70%);
}

/* ========================================
   蓝色主题
   ======================================== */
[data-theme="blue"] {
    --theme-name: 'blue';
    
    /* 蓝色主题的主色调 */
    --theme-primary-h: 220;
    --theme-primary-s: 80%;
    --theme-primary-l: 50%;
    
    --theme-success-h: 160;
    --theme-warning-h: 45;
    --theme-danger-h: 10;
    --theme-info-h: 200;
}

/* ========================================
   绿色主题
   ======================================== */
[data-theme="green"] {
    --theme-name: 'green';
    
    /* 绿色主题的主色调 */
    --theme-primary-h: 140;
    --theme-primary-s: 60%;
    --theme-primary-l: 45%;
    
    --theme-success-h: 120;
    --theme-warning-h: 50;
    --theme-danger-h: 15;
    --theme-info-h: 180;
}

/* ========================================
   紫色主题
   ======================================== */
[data-theme="purple"] {
    --theme-name: 'purple';
    
    /* 紫色主题的主色调 */
    --theme-primary-h: 280;
    --theme-primary-s: 70%;
    --theme-primary-l: 50%;
    
    --theme-success-h: 120;
    --theme-warning-h: 45;
    --theme-danger-h: 10;
    --theme-info-h: 200;
}

/* ========================================
   主题切换动画
   ======================================== */
* {
    transition: 
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* ========================================
   主题切换工具类
   ======================================== */
.theme-transition {
    transition: all 0.3s ease;
}

.theme-transition-slow {
    transition: all 0.6s ease;
}

.theme-transition-fast {
    transition: all 0.15s ease;
}