/**
 * CyberGlass CSS 变量系统
 *
 * 赛博朋克霓虹色 + 拟态毛玻璃参数的完整设计令牌（Design Tokens）。
 * NOTE: 深色模式为默认主题，浅色模式通过 [data-theme="light"] 覆盖。
 */

:root {
    /* ========== 背景色阶 ========== */
    --bg-void: #0a0a0f;                        /* 深空黑——最深层背景 */
    --bg-deep: #0d0d18;                         /* 深层面板背景 */
    --bg-surface: rgba(15, 15, 25, 0.85);       /* 卡片/面板表面 */
    --bg-elevated: rgba(25, 25, 45, 0.75);      /* 悬浮元素背景 */

    /* ========== 毛玻璃参数 ========== */
    --glass-bg: rgba(20, 20, 40, 0.55);         /* 毛玻璃层背景 */
    --glass-bg-strong: rgba(15, 15, 30, 0.75);  /* 增强毛玻璃 */
    --glass-blur: 16px;                          /* 模糊强度 */
    --glass-blur-strong: 24px;                   /* 增强模糊 */
    --glass-border: rgba(255, 255, 255, 0.08);  /* 毛玻璃边框 */
    --glass-border-hover: rgba(255, 255, 255, 0.15);
    --glass-saturation: 180%;                    /* 饱和度增强 */

    /* ========== 霓虹色系 ========== */
    --neon-cyan: #00f0ff;                        /* 主霓虹蓝——主色调 */
    --neon-cyan-rgb: 0, 240, 255;
    --neon-magenta: #ff2a6d;                     /* 霓虹洋红——强调色 */
    --neon-magenta-rgb: 255, 42, 109;
    --neon-purple: #b24bf3;                      /* 霓虹紫——辅助色 */
    --neon-purple-rgb: 178, 75, 243;
    --neon-pink: #ff6ec7;                        /* 霓虹粉——装饰色 */
    --neon-pink-rgb: 255, 110, 199;
    --neon-yellow: #fcee0a;                      /* 霓虹黄——警示/高亮 */
    --neon-yellow-rgb: 252, 238, 10;
    --neon-green: #39ff14;                       /* 霓虹绿——成功状态 */
    --neon-green-rgb: 57, 255, 20;

    /* ========== 渐变 ========== */
    --gradient-neon: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple), var(--neon-magenta));
    --gradient-surface: linear-gradient(145deg, rgba(20, 20, 40, 0.8), rgba(10, 10, 20, 0.9));
    --gradient-glow: linear-gradient(180deg, rgba(0, 240, 255, 0.1), transparent);

    /* ========== 辉光（Glow）========== */
    --glow-xs: 0 0 4px;
    --glow-sm: 0 0 8px;
    --glow-md: 0 0 20px;
    --glow-lg: 0 0 40px;
    --glow-xl: 0 0 60px;

    /* ========== 文字颜色 ========== */
    --text-primary: rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.58);
    --text-tertiary: rgba(255, 255, 255, 0.35);
    --text-link: var(--neon-cyan);
    --text-link-hover: var(--neon-pink);

    /* ========== 排版 ========== */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Orbitron', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */

    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    /* ========== 间距 ========== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ========== 圆角 ========== */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ========== 阴影 ========== */
    --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-neon-cyan: 0 0 20px rgba(var(--neon-cyan-rgb), 0.3), 0 0 40px rgba(var(--neon-cyan-rgb), 0.1);
    --shadow-neon-magenta: 0 0 20px rgba(var(--neon-magenta-rgb), 0.3), 0 0 40px rgba(var(--neon-magenta-rgb), 0.1);
    --shadow-neon-purple: 0 0 20px rgba(var(--neon-purple-rgb), 0.3), 0 0 40px rgba(var(--neon-purple-rgb), 0.1);

    /* ========== 过渡 ========== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========== 布局 ========== */
    --content-max-width: 1200px;
    --content-width: 820px;
    --sidebar-width: 320px;
    --nav-height: 64px;
    --nav-height-scrolled: 56px;

    /* ========== Z-Index 层级 ========== */
    --z-base: 1;
    --z-sidebar: 10;
    --z-nav: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-cursor: 9999;
}