/* ============================================
   CSS 变量系统 - 支持深色/浅色主题切换
   ============================================ */

/* 浅色主题（默认） */
:root {
    /* 主色调 - 科技蓝 */
    --primary-100: #e6f4ff;
    --primary-200: #bae0ff;
    --primary-300: #7eb8ff;
    --primary-400: #4096ff;
    --primary-500: #1677ff;
    --primary-600: #0958d9;
    --primary-700: #003eb3;
    --primary-800: #002c8c;
    --primary-900: #001d66;

    /* 功能色 */
    --success: #00b578;
    --warning: #ff7d00;
    --danger: #f53f3f;
    --info: #1677ff;

    /* 背景色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #fafafa;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: rgba(0, 0, 0, 0.08);

    /* 文字色 */
    --text-primary: #1d2129;
    --text-secondary: #4e5969;
    --text-tertiary: #86909c;
    --text-disabled: #c9cdd4;
    --text-inverse: #ffffff;

    /* 边框色 */
    --border-light: #f2f3f5;
    --border-default: #e5e6eb;
    --border-dark: #c9cdd4;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* 玻璃态效果 */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* 空气质量色标 */
    --aqi-excellent: #00e400;
    --aqi-good: #ffff00;
    --aqi-moderate: #ff7e00;
    --aqi-unhealthy-sensitive: #ff0000;
    --aqi-unhealthy: #8f3f97;
    --aqi-hazardous: #7e0023;

    /* 尺寸系统 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* 间距 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 字体 */
    --font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 深色主题 */
[data-theme="dark"] {
    /* 背景色 */
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1f1f1f;
    --bg-elevated: #1f1f1f;
    --bg-card: #1a1a1a;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-active: rgba(255, 255, 255, 0.1);

    /* 文字色 */
    --text-primary: #f2f3f5;
    --text-secondary: #c9cdd4;
    --text-tertiary: #86909c;
    --text-disabled: #4e5969;
    --text-inverse: #1d2129;

    /* 边框色 */
    --border-light: #272727;
    --border-default: #333333;
    --border-dark: #434343;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* 玻璃态效果 */
    --glass-bg: rgba(30, 30, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* 渐变定义 */
:root {
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-hero: linear-gradient(135deg, #1677ff 0%, #00b4d8 50%, #0077b6 100%);
    --gradient-card: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    --gradient-text: linear-gradient(135deg, var(--primary-400) 0%, #00d4ff 100%);
    --gradient-glow: radial-gradient(circle at center, var(--primary-200) 0%, transparent 70%);
}

[data-theme="dark"] {
    --gradient-hero: linear-gradient(135deg, #0d47a1 0%, #006064 50%, #004d40 100%);
    --gradient-glow: radial-gradient(circle at center, var(--primary-700) 0%, transparent 70%);
}