@charset "utf-8";
/**
 * CSS Variables - 全局样式变量定义
 * 用于统一管理颜色、间距、断点等
 */

:root {
    /* ========== 主题色 ========== */
    --color-primary: #EF3B1B;
    --color-primary-hover: #d63418;
    --color-primary-light: #fef0ed;
    --color-primary-rgb: 239, 59, 27;

    /* ========== 功能色 ========== */
    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-info: #007bff;
    --color-info-hover: #0056b3;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;

    /* ========== 中性色 ========== */
    --color-text: #333333;
    --color-text-secondary: #565656;
    --color-text-muted: #666666;
    --color-text-light: #79808f;
    --color-text-white: #ffffff;
    --color-text-white-45: rgba(255, 255, 255, 0.45);
    --color-text-white-15: rgba(255, 255, 255, 0.15);

    /* ========== 背景色 ========== */
    --color-bg: #f9f9f9;
    --color-bg-white: #ffffff;
    --color-bg-alt: #f5f7fb;
    --color-bg-light: #f8f9fa;
    --color-bg-dark: #232323;
    --color-bg-dark-alt: #2a2a2a;
    --color-bg-gray: #f7f7f7;

    /* ========== 边框色 ========== */
    --color-border: #e5e8f0;
    --color-border-light: #eee;
    --color-border-medium: #ddd;
    --color-border-dark: #d4d4d4;
    --color-border-white-20: rgba(255, 255, 255, 0.2);

    /* ========== 阴影 ========== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-nav: 0 4px 8px 0 rgba(0, 12, 49, 0.1);

    /* ========== 响应式断点 ========== */
    /* 注意: CSS变量不能在media query中使用，这里仅作记录 */
    /* --breakpoint-8k: 7680px;  8K 超大屏 */
    /* --breakpoint-5k: 5120px;  5K 专业屏 */
    /* --breakpoint-4k: 3840px;  4K 超高清 */
    /* --breakpoint-2k: 2560px;  2K 高清 */
    /* --breakpoint-xxl: 1600px; */
    /* --breakpoint-xl: 1400px; */
    /* --breakpoint-lg: 1200px; */
    /* --breakpoint-md: 1024px; */
    /* --breakpoint-sm: 768px; */
    /* --breakpoint-xs: 480px; */
    /* --breakpoint-xxs: 375px; */

    /* ========== 容器宽度 ========== */
    --container-max-width: 1400px;
    --container-padding: 20px;

    /* ========== 高分辨率容器宽度 ========== */
    --container-max-width-2k: 1800px;   /* 2K (2560×1440) */
    --container-max-width-4k: 2400px;   /* 4K (3840×2160) */
    --container-max-width-5k: 2800px;   /* 5K (5120×2880) */
    --container-max-width-8k: 3200px;   /* 8K (7680×4320) */

    /* ========== 间距 ========== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 100px;

    /* ========== 字体 ========== */
    --font-family: Microsoft Yahei, Arial, \5FAE\8F6F\96C5\9ED1, Helvetica, sans-serif;
    --font-family-serif: 思源宋体, serif;
    --font-family-number: fantasy;

    /* ========== 字号 (rem 基准: 16px) ========== */
    --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.625rem;   /* 42px */

    /* ========== 行高 ========== */
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* ========== 圆角 ========== */
    --border-radius-sm: 4px;
    --border-radius-base: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;

    /* ========== 过渡动画 ========== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.4s ease;
    --transition-slower: 0.5s ease;

    /* ========== Z-Index层级 ========== */
    --z-dropdown: 10;
    --z-sticky: 99;
    --z-fixed: 100;
    --z-modal-backdrop: 9999;
    --z-modal: 99999;
    --z-tooltip: 999999;

    /* ========== 头部导航 ========== */
    --header-height: 90px;
    --header-height-lg: 80px;
    --header-height-md: 68px;
    --header-bg: #ffffff;

    /* ========== 底部Footer ========== */
    --footer-bg: #1a1a1a;
    --footer-bg-bottom: #111111;
    --footer-text: rgba(255, 255, 255, 0.7);
    --footer-text-muted: rgba(255, 255, 255, 0.5);
    --footer-border: rgba(255, 255, 255, 0.1);

    /* ========== 社交媒体平台色 ========== */
    --color-wechat: #07C160;
    --color-wechat-gradient: linear-gradient(135deg, #07C160 0%, #00AA47 100%);
    --color-douyin: #fe2c55;
    --color-douyin-gradient: linear-gradient(135deg, #fe2c55 0%, #ff6b9d 100%);
    --color-kuaishou: #ff6b35;
    --color-kuaishou-gradient: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    --color-xiaohongshu: #ff2442;
    --color-xiaohongshu-gradient: linear-gradient(135deg, #ff2442 0%, #ff6b9d 100%);
    --color-bilibili: #00a1d6;
    --color-bilibili-gradient: linear-gradient(135deg, #00a1d6 0%, #5bb7db 100%);
    --color-weibo: #e6162d;
    --color-weibo-gradient: linear-gradient(135deg, #e6162d 0%, #ff4757 100%);
}