/* ============================================
   CSS 变量 - 雀时光智慧KTV 深色主题
   ============================================ */

:root {
    /* 主色系 */
    --color-bg-primary: #0F0B1A;
    --color-bg-secondary: #1A1425;
    --color-bg-card: #1E1730;
    --color-bg-card-hover: #261F3D;

    /* 品牌色 */
    --color-purple: #8B5CF6;
    --color-purple-light: #A78BFA;
    --color-purple-dark: #6D28D9;
    --color-pink: #EC4899;
    --color-gold: #F59E0B;
    --color-gold-light: #FBBF24;

    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #8B5CF6, #EC4899);
    --gradient-gold: linear-gradient(135deg, #F59E0B, #FBBF24);
    --gradient-bg-section: linear-gradient(180deg, #0F0B1A 0%, #1A1425 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);

    /* 文字色 */
    --color-text-primary: #F1F0F5;
    --color-text-secondary: #A8A3B5;
    --color-text-muted: #6B6580;
    --color-text-white: #FFFFFF;

    /* 边框 */
    --color-border: rgba(139, 92, 246, 0.15);
    --color-border-hover: rgba(139, 92, 246, 0.4);

    /* 毛玻璃 */
    --glass-bg: rgba(30, 23, 48, 0.8);
    --glass-blur: blur(20px);

    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.3);
    --shadow-glow-gold: 0 0 30px rgba(245, 158, 11, 0.3);

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

    /* 间距 */
    --section-padding: 100px 0;
    --container-width: 1200px;
    --container-padding: 0 20px;

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --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: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
    --font-size-hero: clamp(2.5rem, 6vw, 4.5rem);

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 导航高度 */
    --header-height: 72px;
}