/**
 * CSS 变量定义文件
 * 统一管理所有颜色、间距、阴影等变量
 * 优化日期: 2026-01-22
 */

:root {
    /* ========== 主题颜色 ========== */
    --color-gold: #FFD700;
    --color-gold-dark: #D4AF37;
    --color-gold-light: #FFED4E;

    /* 青色系列 */
    --color-cyan: #00ffff;
    --color-cyan-80: rgba(0, 255, 255, 0.8);
    --color-cyan-60: rgba(0, 255, 255, 0.6);
    --color-cyan-40: rgba(0, 255, 255, 0.4);
    --color-cyan-20: rgba(0, 255, 255, 0.2);

    /* 中性色 */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-neutral-50: #f9fafb;
    --color-neutral-100: #f3f4f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-600: #4b5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;

    /* 功能色 */
    --color-primary: #FFD700;
    --color-secondary: #00ffff;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* ========== 间距 ========== */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */
    --spacing-4xl: 6rem;      /* 96px */

    /* 区块间距 */
    --section-padding: 4rem 0;
    --section-padding-sm: 2rem 0;
    --section-padding-lg: 6rem 0;

    /* ========== 字体 ========== */
    --font-family-base: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Playfair Display', serif;
    --font-family-mono: 'Courier New', monospace;

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

    /* 字重 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* 行高 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* ========== 阴影 ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* 特殊阴影 */
    --shadow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
    --shadow-cyan: 0 0 20px rgba(0, 255, 255, 0.3);
    --shadow-neon: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);

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

    /* ========== 过渡 ========== */
    --transition-duration-fast: 0.15s;
    --transition-duration-base: 0.3s;
    --transition-duration-slow: 0.5s;
    --transition-timing: ease;
    --transition-timing-in: ease-in;
    --transition-timing-out: ease-out;
    --transition-timing-in-out: ease-in-out;

    /* 常用过渡组合 */
    --transition-all: all var(--transition-duration-base) var(--transition-timing);
    --transition-transform: transform var(--transition-duration-base) var(--transition-timing);
    --transition-opacity: opacity var(--transition-duration-base) var(--transition-timing);
    --transition-colors: color var(--transition-duration-base) var(--transition-timing),
                         background-color var(--transition-duration-base) var(--transition-timing),
                         border-color var(--transition-duration-base) var(--transition-timing);

    /* ========== 断点 ========== */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ========== Z-index ========== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* ========== 容器宽度 ========== */
    --container-max-width: 1200px;
    --container-padding: 1rem;
}

/* ========== 暗色模式变量（可选） ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-neutral-50: #1f2937;
        --color-neutral-100: #374151;
        --color-neutral-200: #4b5563;
        --color-neutral-800: #e5e7eb;
        --color-neutral-900: #f3f4f6;
    }
}