/* ===================================
   CSS 变量系统 - 贵州山海同创数字文化传媒有限公司
   =================================== */

:root {
    /* ========== 颜色系统 ========== */
    --color-primary: #FF6EC7;           /* 霓虹粉 - 主色 */
    --color-primary-light: #FF92D5;     /* 霓虹粉浅色 */
    --color-primary-lighter: #FFC6EA;   /* 霓虹粉更浅 */
    --color-secondary: #00BFFF;         /* 电子蓝 - 辅色 */
    --color-secondary-light: #3CCFFF;   /* 电子蓝浅色 */
    --color-accent: #08F7FE;            /* 未来青 - 点缀色 */
    --color-accent-light: #5CFFFD;      /* 未来青浅色 */
    --color-surface-glow: rgba(255, 110, 199, 0.35);
    --color-text-dark: #F2F4FF;         /* 浅色文本（适配深色背景） */
    --color-text-medium: rgba(242, 244, 255, 0.75);
    --color-text-light: rgba(242, 244, 255, 0.55);
    --color-text-white: #FFFFFF;        /* 白色文本 */
    --color-background: #080817;        /* 页面背景 */
    --color-background-alt: #0F0F26;    /* 深色渐变背景 */
    --color-background-white: #14142B;  /* 卡片背景 */
    --color-border: rgba(255, 255, 255, 0.08);            /* 边框颜色 */
    --color-success: #16DB65;           /* 成功绿 */
    --color-warning: #F5A623;           /* 警告黄 */
    --color-error: #FF5E5E;             /* 错误红 */
    --gradient-primary: linear-gradient(135deg, rgba(255, 110, 199, 0.94), rgba(0, 191, 255, 0.9));
    --gradient-secondary: radial-gradient(circle at top left, rgba(255, 110, 199, 0.4), transparent 60%), radial-gradient(circle at bottom right, rgba(8, 247, 254, 0.35), transparent 55%);
    --gradient-surface: linear-gradient(155deg, rgba(20, 20, 43, 0.95), rgba(10, 10, 28, 0.92));

    /* ========== 字体系统 ========== */
    --font-family-main: "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-mono: "Monaco", "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;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* ========== 间距系统 (8px 基础) ========== */
    --spacing-0: 0;
    --spacing-xs: 0.5rem;               /* 8px */
    --spacing-sm: 1rem;                 /* 16px */
    --spacing-md: 2rem;                 /* 32px */
    --spacing-lg: 3rem;                 /* 48px */
    --spacing-xl: 4rem;                 /* 64px */
    --spacing-2xl: 6rem;                /* 96px */
    --spacing-3xl: 8rem;                /* 128px */

    /* ========== 圆角系统 ========== */
    --border-radius-none: 0;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* ========== 边框系统 ========== */
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 3px;

    /* ========== 阴影系统 ========== */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ========== 过渡系统 ========== */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* ========== 布局系统 ========== */
    --max-width-container: 1280px;
    --max-width-content: 960px;
    --header-height: 60px;
    --footer-height: auto;

    /* ========== Z-Index 系统 ========== */
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-modal-backdrop: 400;
    --z-index-modal: 500;
    --z-index-tooltip: 600;
}

/* ========== 响应式断点 ========== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 15px;
        --font-size-4xl: 2rem;
        --font-size-5xl: 2.5rem;
        --spacing-lg: 2rem;
        --spacing-xl: 3rem;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 14px;
        --font-size-4xl: 1.75rem;
        --font-size-5xl: 2rem;
        --spacing-md: 1.5rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
    }
}