/* ========================================
   theme-variables.css - BadgeForge 主题变量系统
   版本: 1.1.0
   日期: 2026-06-13
   
   架构:
   Layer 1: 基础变量 (data-theme="light" / "dark")
   Layer 2: 主题变量 (class="theme-{skin}")
   Layer 3: 组件变量 (可选)
   
   更新日志:
   - 1.1.0: 添加全局过渡动画优化
   ======================================== */

/* ========================================
   全局过渡动画优化
   ======================================== */

/* 主题切换时的平滑过渡 */
*,
*::before,
*::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease,
                opacity 0.3s ease;
}

/* 排除不需要过渡的元素 */
.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
    transition: none !important;
}

/* 主题切换动画类 */
.theme-transitioning {
    pointer-events: none;
}

.theme-transitioning * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease !important;
}

/* 主题切换闪光效果 */
.theme-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--flash-x, 50%) var(--flash-y, 50%), 
                var(--skin-primary, var(--primary)) 0%, 
                transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    animation: themeFlash 0.5s ease-out;
}

@keyframes themeFlash {
    0% {
        opacity: 0.3;
        transform: scale(0);
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

/* 主题切换涟漪效果 */
.theme-ripple {
    position: fixed;
    border-radius: 50%;
    background: var(--skin-primary, var(--primary));
    opacity: 0.2;
    pointer-events: none;
    z-index: 9998;
    animation: themeRipple 0.6s ease-out forwards;
}

@keyframes themeRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.3;
    }
    100% {
        width: 200vmax;
        height: 200vmax;
        opacity: 0;
    }
}

/* ========================================
   Layer 1: 基础变量 - 日夜模式
   ======================================== */

/* 日间模式 (data-theme="light") */
[data-theme="light"] {
    /* 背景色 */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-overlay: rgba(0, 0, 0, 0.06);
    
    /* 文字色 */
    --text-primary: #1a1a2e;
    --text-secondary: #495057;
    --text-tertiary: #868e96;
    
    /* 边框色 */
    --border-primary: rgba(0, 0, 0, 0.12);
    --border-secondary: rgba(0, 0, 0, 0.06);
    
    /* 阴影色 */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    
    /* 状态色 */
    --success: #16a34a;
    --success-light: #22c55e;
    --success-dark: #15803d;
    --success-bg: rgba(22, 163, 74, 0.1);
    
    --danger: #dc2626;
    --danger-light: #ef4444;
    --danger-dark: #b91c1c;
    --danger-bg: rgba(220, 38, 38, 0.1);
    
    --warning: #d97706;
    --warning-light: #f59e0b;
    --warning-dark: #b45309;
    --warning-bg: rgba(217, 119, 6, 0.1);
    
    --info: #2563eb;
    --info-light: #3b82f6;
    --info-dark: #1d4ed8;
    --info-bg: rgba(37, 99, 235, 0.1);
}

/* 夜间模式 (data-theme="dark") */
[data-theme="dark"] {
    /* 背景色 */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-overlay: rgba(255, 255, 255, 0.04);
    
    /* 文字色 */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    
    /* 边框色 */
    --border-primary: rgba(255, 255, 255, 0.12);
    --border-secondary: rgba(255, 255, 255, 0.06);
    
    /* 阴影色 */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* 状态色 */
    --success: #4ade80;
    --success-light: #22c55e;
    --success-dark: #16a34a;
    --success-bg: rgba(74, 222, 128, 0.1);
    
    --danger: #f87171;
    --danger-light: #ef4444;
    --danger-dark: #dc2626;
    --danger-bg: rgba(248, 113, 113, 0.1);
    
    --warning: #fbbf24;
    --warning-light: #f59e0b;
    --warning-dark: #d97706;
    --warning-bg: rgba(251, 191, 36, 0.1);
    
    --info: #60a5fa;
    --info-light: #3b82f6;
    --info-dark: #2563eb;
    --info-bg: rgba(96, 165, 250, 0.1);
}

/* ========================================
   Layer 2: 主题变量 - 9套主题
   ======================================== */

/* 主题 1: 暗夜 (Dark) */
[data-theme="light"].theme-dark {
    --skin-primary: #4f46e5;
    --skin-secondary: #6366f1;
    --skin-rgb: 79, 70, 229;
    --skin-bg: #eef2ff;
    --skin-surface: #e0e7ff;
    --skin-border: rgba(79, 70, 229, 0.2);
    --skin-text: #312e81;
    --skin-glow: rgba(79, 70, 229, 0.3);
}

[data-theme="dark"].theme-dark {
    --skin-primary: #6366f1;
    --skin-secondary: #818cf8;
    --skin-rgb: 99, 102, 241;
    --skin-bg: #0a0a1f;
    --skin-surface: #141438;
    --skin-border: rgba(100, 100, 220, 0.3);
    --skin-text: #a0a0ff;
    --skin-glow: rgba(99, 102, 241, 0.5);
}

/* 主题 2: 霓虹 (Neon) */
[data-theme="light"].theme-neon {
    --skin-primary: #d946ef;
    --skin-secondary: #e879f9;
    --skin-rgb: 217, 70, 239;
    --skin-bg: #fdf4ff;
    --skin-surface: #f5d0fe;
    --skin-border: rgba(217, 70, 239, 0.15);
    --skin-text: #86198f;
    --skin-glow: rgba(217, 70, 239, 0.2);
}

[data-theme="dark"].theme-neon {
    --skin-primary: #ff00ff;
    --skin-secondary: #ff66ff;
    --skin-rgb: 255, 0, 255;
    --skin-bg: #06000a;
    --skin-surface: #0f0020;
    --skin-border: rgba(255, 0, 255, 0.2);
    --skin-text: #ee66ee;
    --skin-glow: rgba(255, 0, 255, 0.5);
}

/* 主题 3: 黄金 (Gold) */
[data-theme="light"].theme-gold {
    --skin-primary: #ca8a04;
    --skin-secondary: #eab308;
    --skin-rgb: 202, 138, 4;
    --skin-bg: #fefce8;
    --skin-surface: #fef9c3;
    --skin-border: rgba(202, 138, 4, 0.2);
    --skin-text: #713f12;
    --skin-glow: rgba(202, 138, 4, 0.2);
}

[data-theme="dark"].theme-gold {
    --skin-primary: #daa520;
    --skin-secondary: #ffd700;
    --skin-rgb: 218, 165, 32;
    --skin-bg: #0f0a04;
    --skin-surface: #1f1700;
    --skin-border: rgba(255, 190, 0, 0.2);
    --skin-text: #ffd700;
    --skin-glow: rgba(218, 165, 32, 0.5);
}

/* 主题 4: 魔导 (Arcane) */
[data-theme="light"].theme-arcane {
    --skin-primary: #7c3aed;
    --skin-secondary: #0891b2;
    --skin-rgb: 124, 58, 237;
    --skin-bg: #f5f3ff;
    --skin-surface: #ede9fe;
    --skin-border: rgba(124, 58, 237, 0.2);
    --skin-text: #5b21b6;
    --skin-glow: rgba(124, 58, 237, 0.2);
}

[data-theme="dark"].theme-arcane {
    --skin-primary: #8b5cf6;
    --skin-secondary: #06b6d4;
    --skin-rgb: 139, 92, 246;
    --skin-bg: #0a0a0f;
    --skin-surface: #12101e;
    --skin-border: rgba(139, 92, 246, 0.3);
    --skin-text: #c4b5fd;
    --skin-glow: rgba(139, 92, 246, 0.5);
}

/* 主题 5: 哥特 (Gothic) */
[data-theme="light"].theme-gothic {
    --skin-primary: #b91c1c;
    --skin-secondary: #9a3412;
    --skin-rgb: 185, 28, 28;
    --skin-bg: #fef2f2;
    --skin-surface: #fee2e2;
    --skin-border: rgba(185, 28, 28, 0.2);
    --skin-text: #991b1b;
    --skin-glow: rgba(185, 28, 28, 0.2);
}

[data-theme="dark"].theme-gothic {
    --skin-primary: #dc2626;
    --skin-secondary: #7c2d12;
    --skin-rgb: 220, 38, 38;
    --skin-bg: #050505;
    --skin-surface: #120808;
    --skin-border: rgba(220, 38, 38, 0.3);
    --skin-text: #fca5a5;
    --skin-glow: rgba(220, 38, 38, 0.5);
}

/* 主题 6: 蒸汽 (Steampunk) */
[data-theme="light"].theme-steampunk {
    --skin-primary: #92400e;
    --skin-secondary: #4d7c0f;
    --skin-rgb: 146, 64, 14;
    --skin-bg: #fffbeb;
    --skin-surface: #fef3c7;
    --skin-border: rgba(146, 64, 14, 0.2);
    --skin-text: #78350f;
    --skin-glow: rgba(146, 64, 14, 0.2);
}

[data-theme="dark"].theme-steampunk {
    --skin-primary: #b45309;
    --skin-secondary: #65a30d;
    --skin-rgb: 180, 83, 9;
    --skin-bg: #1a1510;
    --skin-surface: #2a1e12;
    --skin-border: rgba(180, 83, 9, 0.3);
    --skin-text: #f5deb3;
    --skin-glow: rgba(180, 83, 9, 0.5);
}

/* 主题 7: 科技 (Tech) */
[data-theme="light"].theme-tech {
    --skin-primary: #0891b2;
    --skin-secondary: #0e7490;
    --skin-rgb: 8, 145, 178;
    --skin-bg: #ecfeff;
    --skin-surface: #cffafe;
    --skin-border: rgba(8, 145, 178, 0.2);
    --skin-text: #164e63;
    --skin-glow: rgba(8, 145, 178, 0.2);
}

[data-theme="dark"].theme-tech {
    --skin-primary: #00d4ff;
    --skin-secondary: #0099cc;
    --skin-rgb: 0, 212, 255;
    --skin-bg: #000510;
    --skin-surface: #001525;
    --skin-border: rgba(0, 212, 255, 0.3);
    --skin-text: #e0f7ff;
    --skin-glow: rgba(0, 212, 255, 0.5);
}

/* 主题 8: 赛博 (Cyber) */
[data-theme="light"].theme-cyber {
    --skin-primary: #db2777;
    --skin-secondary: #06b6d4;
    --skin-rgb: 219, 39, 119;
    --skin-bg: #fdf2f8;
    --skin-surface: #fce7f3;
    --skin-border: rgba(219, 39, 119, 0.15);
    --skin-text: #9d174d;
    --skin-glow: rgba(219, 39, 119, 0.2);
}

[data-theme="dark"].theme-cyber {
    --skin-primary: #ff00ff;
    --skin-secondary: #00ffff;
    --skin-rgb: 255, 0, 255;
    --skin-bg: #0a0014;
    --skin-surface: #150020;
    --skin-border: rgba(255, 0, 255, 0.4);
    --skin-text: #ffccff;
    --skin-glow: rgba(255, 0, 255, 0.5);
}

/* 主题 9: 废土 (Wasteland) */
[data-theme="light"].theme-wasteland {
    --skin-primary: #b45309;
    --skin-secondary: #854d0e;
    --skin-rgb: 180, 83, 9;
    --skin-bg: #fef3c7;
    --skin-surface: #fde68a;
    --skin-border: rgba(180, 83, 9, 0.2);
    --skin-text: #78350f;
    --skin-glow: rgba(180, 83, 9, 0.2);
}

[data-theme="dark"].theme-wasteland {
    --skin-primary: #d97706;
    --skin-secondary: #a16207;
    --skin-rgb: 217, 119, 6;
    --skin-bg: #1c1917;
    --skin-surface: #2a2418;
    --skin-border: rgba(217, 119, 6, 0.3);
    --skin-text: #f5f5f4;
    --skin-glow: rgba(217, 119, 6, 0.5);
}

/* ========================================
   Layer 3: 组件变量 (可选)
   ======================================== */

/* 锻造按钮 */
.forge-button {
    --btn-bg: var(--skin-primary);
    --btn-text: #ffffff;
    --btn-border: var(--skin-border);
    --btn-glow: var(--skin-glow);
    --btn-hover-bg: var(--skin-secondary);
}

/* 卡片 */
.forge-card {
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-primary);
    --card-shadow: var(--shadow-md);
}

/* 面板 */
.forge-panel {
    --panel-bg: var(--bg-tertiary);
    --panel-border: var(--border-secondary);
}

/* ========================================
   过渡动画
   ======================================== */

/* 全局过渡 */
*, *::before, *::after {
    transition: background-color 0.4s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.4s ease;
}

/* 排除不需要过渡的元素 */
.particles-canvas, 
.rune-ring,
.no-transition {
    transition: none !important;
}

/* 主题切换淡入淡出 */
.forge-page {
    transition: opacity 0.3s ease;
}

.forge-page.switching {
    opacity: 0.7;
}