/* ========================================
   variables.css - Badge Forge 设计系统变量
   版本: 2026-05-30
   ======================================== */

/* ========================================
   暗色主题（默认）
   ======================================== */
:root {
    /* 主色调 - 使用主题皮肤变量作为优先值 */
    --primary: var(--skin-primary, #6366f1);
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-bg: rgba(99, 102, 241, 0.1);
    --primary-border: rgba(99, 102, 241, 0.3);

    /* 背景色 - 使用主题皮肤变量 */
    --bg-primary: var(--skin-bg, #0f172a);
    --bg-secondary: var(--skin-surface, #1e293b);
    --bg-card: var(--skin-surface, #1e293b);
    --bg-hover: #334155;

    /* 文字色 - 使用主题皮肤变量 */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: var(--skin-text, #64748b);

    /* 状态色 */
    --success: #22c55e;
    --success-light: #10b981;
    --success-dark: #16a34a;
    --success-deeper: #059669;
    --success-bg: rgba(34, 197, 94, 0.1);

    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    --warning-deeper: #b45309;
    --warning-bg: rgba(245, 158, 11, 0.1);

    --danger: #ef4444;
    --danger-light: #f87171;
    --danger-dark: #dc2626;
    --danger-deeper: #7f1d1d;
    --danger-bg: rgba(239, 68, 68, 0.1);

    --info: #3b82f6;
    --info-light: #60a5fa;
    --info-bg: rgba(59, 130, 246, 0.1);

    --purple: #a855f7;
    --purple-light: #c4b5fd;
    --purple-dark: #8b5cf6;
    --purple-deeper: #7c3aed;

    /* 金色/魔力色系（Forge 核心色） */
    --gold: #f59e0b;
    --gold-light: #fbbf24;
    --gold-bright: #ffe066;
    --gold-pure: #ffd700;
    --gold-dark: #d97706;
    --gold-deeper: #b45309;
    --gold-bg: rgba(245, 158, 11, 0.1);
    --gold-glow: rgba(245, 158, 11, 0.4);

    /* 霓虹特效色系 */
    --neon-pink: #ff00ff;
    --neon-pink-light: #ffaaff;
    --neon-pink-soft: #cc77dd;
    --neon-pink-bg: rgba(255, 0, 255, 0.1);
    --neon-cyan: #00ffff;
    --neon-cyan-light: #00d4ff;
    --neon-cyan-bg: rgba(0, 255, 255, 0.1);
    --neon-green: #00ff88;

    /* 蓝色系 */
    --blue: #3b82f6;
    --blue-light: #60a5fa;
    --cyan: #06b6d4;

    /* 卡片边框 - 使用主题皮肤变量 */
    --card-bg: var(--skin-surface, #1e293b);
    --card-border: var(--skin-border, #334155);

    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    --gradient-neon: linear-gradient(135deg, var(--neon-pink) 0%, var(--purple) 100%);

    /* 圆角系统 (4px网格基准) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* 阴影系统 */
    --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);
    --shadow-glow: 0 0 20px var(--skin-glow, rgba(99, 102, 241, 0.3));
    --primary-glow: var(--skin-glow, rgba(99, 102, 241, 0.5));

    /* 间距系统 (4px网格) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* 字体系统 */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    /* 过渡时间 */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    /* 缓动函数 */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

    /* Z-index 层级 */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-modal-backdrop: 200;
    --z-modal: 210;
    --z-toast: 300;
    --z-fab: 400;
}

/* ========================================
   亮色主题 - 清新白天
   ======================================== */
[data-theme="light"] {
    --primary: var(--skin-primary, #6366f1);
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-bg: rgba(99, 102, 241, 0.08);
    --primary-border: rgba(99, 102, 241, 0.2);

    --bg-primary: var(--skin-bg, #f1f5f9);
    --bg-secondary: var(--skin-surface, #ffffff);
    --bg-card: var(--skin-surface, #ffffff);
    --bg-hover: #f1f5f9;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: var(--skin-text, #94a3b8);

    --success: #16a34a;
    --success-light: #10b981;
    --success-dark: #15803d;
    --success-deeper: #059669;
    --success-bg: rgba(22, 163, 74, 0.15);

    --warning: #d97706;
    --warning-light: #f59e0b;
    --warning-dark: #b45309;
    --warning-deeper: #92400e;
    --warning-bg: rgba(217, 119, 6, 0.15);

    --danger: #dc2626;
    --danger-light: #ef4444;
    --danger-dark: #b91c1c;
    --danger-deeper: #991b1b;
    --danger-bg: rgba(220, 38, 38, 0.15);

    --info: #2563eb;
    --info-light: #3b82f6;
    --info-bg: rgba(37, 99, 235, 0.15);

    --purple: #8b5cf6;
    --purple-light: #a78bfa;
    --purple-dark: #7c3aed;
    --purple-deeper: #6d28d9;

    --gold: #d97706;
    --gold-light: #f59e0b;
    --gold-bright: #fbbf24;
    --gold-pure: #eab308;
    --gold-dark: #b45309;
    --gold-deeper: #92400e;
    --gold-bg: rgba(217, 119, 6, 0.1);
    --gold-glow: rgba(217, 119, 6, 0.2);

    --neon-pink: #db2777;
    --neon-pink-light: #ec4899;
    --neon-pink-soft: #a855f7;
    --neon-pink-bg: rgba(219, 39, 119, 0.1);
    --neon-cyan: #0891b2;
    --neon-cyan-light: #06b6d4;
    --neon-cyan-bg: rgba(8, 145, 178, 0.1);
    --neon-green: #10b981;

    --blue: #2563eb;
    --blue-light: #3b82f6;
    --cyan: #0891b2;

    --card-bg: var(--skin-surface, #ffffff);
    --card-border: var(--skin-border, #e2e8f0);

    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    --gradient-neon: linear-gradient(135deg, var(--neon-pink) 0%, var(--purple) 100%);

    --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);
    --shadow-glow: 0 0 20px var(--skin-glow, rgba(99, 102, 241, 0.15));
}

/* ========================================
   系统主题跟随 (prefers-color-scheme: light)
   ======================================== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --primary: var(--skin-primary, #6366f1);
        --primary-dark: #4f46e5;
        --primary-light: #818cf8;
        --primary-bg: rgba(99, 102, 241, 0.08);
        --primary-border: rgba(99, 102, 241, 0.2);

        --bg-primary: var(--skin-bg, #f1f5f9);
        --bg-secondary: var(--skin-surface, #ffffff);
        --bg-card: var(--skin-surface, #ffffff);
        --bg-hover: #f1f5f9;

        --text-primary: #1e293b;
        --text-secondary: #64748b;
        --text-muted: var(--skin-text, #94a3b8);

        --success: #16a34a;
        --success-light: #10b981;
        --success-dark: #15803d;
        --success-deeper: #059669;
        --success-bg: rgba(22, 163, 74, 0.08);

        --warning: #d97706;
        --warning-light: #f59e0b;
        --warning-dark: #b45309;
        --warning-deeper: #92400e;
        --warning-bg: rgba(217, 119, 6, 0.08);

        --danger: #dc2626;
        --danger-light: #ef4444;
        --danger-dark: #b91c1c;
        --danger-deeper: #991b1b;
        --danger-bg: rgba(220, 38, 38, 0.08);

        --info: #2563eb;
        --info-light: #3b82f6;
        --info-bg: rgba(37, 99, 235, 0.08);

        --purple: #8b5cf6;
        --purple-light: #a78bfa;
        --purple-dark: #7c3aed;
        --purple-deeper: #6d28d9;

        --gold: #d97706;
        --gold-light: #f59e0b;
        --gold-bright: #fbbf24;
        --gold-pure: #eab308;
        --gold-dark: #b45309;
        --gold-deeper: #92400e;
        --gold-bg: rgba(217, 119, 6, 0.08);
        --gold-glow: rgba(217, 119, 6, 0.15);

        --neon-pink: #db2777;
        --neon-pink-light: #ec4899;
        --neon-pink-soft: #a855f7;
        --neon-pink-bg: rgba(219, 39, 119, 0.08);
        --neon-cyan: #0891b2;
        --neon-cyan-light: #06b6d4;
        --neon-cyan-bg: rgba(8, 145, 178, 0.08);
        --neon-green: #10b981;

        --blue: #2563eb;
        --blue-light: #3b82f6;
        --cyan: #0891b2;

        --card-bg: var(--skin-surface, #ffffff);
        --card-border: var(--skin-border, #e2e8f0);

        --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
        --gradient-warning: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
        --gradient-danger: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
        --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
        --gradient-neon: linear-gradient(135deg, var(--neon-pink) 0%, var(--purple) 100%);

        --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);
        --shadow-glow: 0 0 20px var(--skin-glow, rgba(99, 102, 241, 0.15));
    }
}