/**
 * Theme Variables - 主题变量系统
 * 统一管理整个网站的主题色调和样式
 *
 * @package     block-canvas Child
 * @subpackage  Assets
 * @author      JoshuaWang2019
 * @version     1.0.0
 * @since       2025-06-29
 */

:root {
    /* ==========================================================================
       主题色彩系统 - 可通过修改这些变量来快速更换主题
       ========================================================================== */
    
    /* 主色调 - 绿色系 */
    --theme-primary: #48bb78;
    --theme-primary-dark: #38a169;
    --theme-primary-light: #68d391;
    --theme-primary-lighter: #9ae6b4;
    --theme-primary-lightest: #c6f6d5;
    
    /* 次要色调 */
    --theme-secondary: #4299e1;
    --theme-secondary-dark: #3182ce;
    --theme-secondary-light: #63b3ed;
    
    /* 中性色调 */
    --theme-gray-50: #f8fafc;
    --theme-gray-100: #f1f5f9;
    --theme-gray-200: #e2e8f0;
    --theme-gray-300: #cbd5e0;
    --theme-gray-400: #a0aec0;
    --theme-gray-500: #718096;
    --theme-gray-600: #4a5568;
    --theme-gray-700: #2d3748;
    --theme-gray-800: #1a202c;
    --theme-gray-900: #171923;
    
    /* 状态色 */
    --theme-success: #48bb78;
    --theme-warning: #ed8936;
    --theme-error: #f56565;
    --theme-info: #4299e1;
    
    /* ==========================================================================
       渐变色系统
       ========================================================================== */
    --theme-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    --theme-gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-secondary-dark) 100%);
    --theme-gradient-success: linear-gradient(135deg, var(--theme-success) 0%, #38a169 100%);
    --theme-gradient-background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --theme-gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    
    /* 高亮渐变 */
    --theme-gradient-highlight: linear-gradient(120deg, var(--theme-primary-lightest) 0%, var(--theme-primary-lighter) 100%);
    
    /* ==========================================================================
       按钮系统
       ========================================================================== */
    --btn-primary-bg: var(--theme-gradient-primary);
    --btn-primary-color: #ffffff;
    --btn-primary-hover-shadow: 0 8px 25px rgba(72, 187, 120, 0.3);
    --btn-primary-hover-transform: translateY(-2px);
    
    --btn-secondary-bg: var(--theme-gradient-secondary);
    --btn-secondary-color: #ffffff;
    --btn-secondary-hover-shadow: 0 8px 25px rgba(66, 153, 225, 0.3);
    
    --btn-outline-border: 2px solid var(--theme-primary);
    --btn-outline-color: var(--theme-primary);
    --btn-outline-hover-bg: var(--theme-primary);
    --btn-outline-hover-color: #ffffff;
    
    /* ==========================================================================
       输入框系统
       ========================================================================== */
    --input-border: 2px solid var(--theme-gray-200);
    --input-border-focus: 2px solid var(--theme-primary);
    --input-bg: var(--theme-gray-50);
    --input-bg-focus: #ffffff;
    --input-shadow-focus: 0 0 0 3px rgba(72, 187, 120, 0.1);
    --input-placeholder-color: var(--theme-gray-400);
    
    /* ==========================================================================
       卡片系统
       ========================================================================== */
    --card-bg: #ffffff;
    --card-border: 1px solid rgba(255, 255, 255, 0.2);
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.15);
    --card-radius: 16px;
    --card-radius-small: 12px;
    --card-hover-transform: translateY(-8px);
    
    /* ==========================================================================
       间距系统
       ========================================================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* ==========================================================================
       字体系统
       ========================================================================== */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ==========================================================================
       过渡动画
       ========================================================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ==========================================================================
       断点系统（用于媒体查询参考）
       ========================================================================== */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
}

/* ==========================================================================
   暗色主题变量（可选）
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-gray-50: #1a202c;
        --theme-gray-100: #2d3748;
        --theme-gray-200: #4a5568;
        --theme-gray-300: #718096;
        --theme-gray-400: #a0aec0;
        --theme-gray-500: #cbd5e0;
        --theme-gray-600: #e2e8f0;
        --theme-gray-700: #f1f5f9;
        --theme-gray-800: #f8fafc;
        --theme-gray-900: #ffffff;
        
        --card-bg: #2d3748;
        --input-bg: #4a5568;
        --input-bg-focus: #2d3748;
    }
}

/* ==========================================================================
   主题切换类（JavaScript控制）
   ========================================================================== */

/* 蓝色主题 */
.theme-blue {
    --theme-primary: #4299e1;
    --theme-primary-dark: #3182ce;
    --theme-primary-light: #63b3ed;
    --theme-primary-lighter: #90cdf4;
    --theme-primary-lightest: #bee3f8;
}

/* 紫色主题 */
.theme-purple {
    --theme-primary: #9f7aea;
    --theme-primary-dark: #805ad5;
    --theme-primary-light: #b794f6;
    --theme-primary-lighter: #d6bcfa;
    --theme-primary-lightest: #e9d8fd;
}

/* 橙色主题 */
.theme-orange {
    --theme-primary: #ed8936;
    --theme-primary-dark: #dd6b20;
    --theme-primary-light: #f6ad55;
    --theme-primary-lighter: #fbb040;
    --theme-primary-lightest: #feebc8;
}

/* 红色主题 */
.theme-red {
    --theme-primary: #f56565;
    --theme-primary-dark: #e53e3e;
    --theme-primary-light: #fc8181;
    --theme-primary-lighter: #feb2b2;
    --theme-primary-lightest: #fed7d7;
}

/* ==========================================================================
   工具类
   ========================================================================== */

/* 快速应用主题色 */
.text-primary { color: var(--theme-primary) !important; }
.text-primary-dark { color: var(--theme-primary-dark) !important; }
.bg-primary { background: var(--theme-primary) !important; }
.bg-primary-gradient { background: var(--theme-gradient-primary) !important; }
.border-primary { border-color: var(--theme-primary) !important; }

/* 状态色 */
.text-success { color: var(--theme-success) !important; }
.text-warning { color: var(--theme-warning) !important; }
.text-error { color: var(--theme-error) !important; }
.text-info { color: var(--theme-info) !important; }