/**
 * 0shequcn 科技感设计系统 - CSS变量
 * 北天咨询服务平台前端升级
 */

:root {
    /* ==================== 品牌色 ==================== */

    /* 主色调 - 科技蓝 */
    --primary: #0066FF;
    --primary-dark: #0052CC;
    --primary-light: #3385FF;
    --primary-lighter: #E6F0FF;

    /* 辅助色 - 荧光青 */
    --secondary: #00D4AA;
    --secondary-dark: #00A88A;
    --secondary-light: #33E6C2;
    --secondary-lighter: #E6FAF7;

    /* 强调色 - 活力橙 */
    --accent: #FF6B35;
    --accent-dark: #E05520;
    --accent-light: #FF8F66;
    --accent-lighter: #FFF0EB;

    /* 深色系 - 深空蓝 */
    --dark: #0A1628;
    --dark-2: #1A2F4B;
    --dark-3: #2A4166;

    /* 中性色 */
    --neutral-900: #1E293B;
    --neutral-700: #334155;
    --neutral-600: #475569;
    --neutral-500: #64748B;
    --neutral-400: #94A3B8;
    --neutral-300: #CBD5E1;
    --neutral-200: #E2E8F0;
    --neutral-100: #F1F5F9;
    --neutral-50: #F8FAFC;

    /* 亮色背景 */
    --light: #F0F4FF;
    --light-2: #E8EEFF;
    --white: #FFFFFF;

    /* 状态色 */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* ==================== 字体系统 ==================== */

    /* 主字体 */
    --font-primary: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;

    /* 数字强调字体 */
    --font-number: "DIN Alternate", "Roboto", "SF Pro Display", sans-serif;

    /* 字号 */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;
    --text-5xl: 36px;
    --text-6xl: 48px;

    /* 字重 */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* 行高 */
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* ==================== 间距系统 ==================== */

    /* 基于 8px 网格 */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* 常用组合 */
    --spacing-xs: var(--space-2) var(--space-3);
    --spacing-sm: var(--space-3) var(--space-4);
    --spacing-md: var(--space-4) var(--space-6);
    --spacing-lg: var(--space-6) var(--space-8);
    --spacing-xl: var(--space-8) var(--space-12);

    /* ==================== 圆角 ==================== */

    --radius-none: 0;
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ==================== 阴影 ==================== */

    /* 科技感渐变阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 102, 255, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 102, 255, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 102, 255, 0.16);
    --shadow-xl: 0 12px 32px rgba(0, 102, 255, 0.2);
    --shadow-2xl: 0 20px 48px rgba(0, 102, 255, 0.24);

    /* 悬停阴影 */
    --shadow-hover: 0 16px 40px rgba(0, 102, 255, 0.22);
    --shadow-card-hover: 0 12px 32px rgba(0, 102, 255, 0.18);

    /* 内阴影 */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* ==================== 过渡动画 ==================== */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ==================== 渐变 ==================== */

    /* 主渐变 */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    --gradient-hero: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
    --gradient-accent: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    --gradient-light: linear-gradient(180deg, var(--white) 0%, var(--light) 100%);

    /* 装饰渐变 */
    --gradient-glow: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.15) 0%, transparent 70%);
    --gradient-shine: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);

    /* ==================== 边框 ==================== */

    --border-color: rgba(0, 102, 255, 0.1);
    --border-color-light: rgba(0, 102, 255, 0.06);
    --border-color-hover: rgba(0, 102, 255, 0.3);
    --border-width: 1px;
    --border-width-2: 2px;

    /* ==================== Z-Index 层级 ==================== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* ==================== 容器尺寸 ==================== */

    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 992px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    /* ==================== 导航栏 ==================== */

    --navbar-height: 64px;
    --navbar-height-mobile: 56px;
    --navbar-bg: var(--white);
    --navbar-bg-transparent: transparent;
    --navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    /* ==================== 卡片 ==================== */

    --card-bg: var(--white);
    --card-border: var(--border-color);
    --card-radius: var(--radius-lg);
    --card-padding: var(--space-6);
    --card-hover-transform: translateY(-4px);

    /* ==================== 按钮 ==================== */

    --btn-height-sm: 32px;
    --btn-height-base: 40px;
    --btn-height-lg: 48px;
    --btn-height-xl: 56px;

    --btn-padding-sm: var(--space-2) var(--space-4);
    --btn-padding-base: var(--space-3) var(--space-6);
    --btn-padding-lg: var(--space-4) var(--space-8);

    --btn-radius: var(--radius-md);
    --btn-font-weight: var(--font-semibold);

    /* ==================== 移动端断点 ==================== */

    --mobile: 576px;
    --tablet: 768px;
    --desktop: 992px;
    --widescreen: 1200px;
}

/* 暗色模式变量（可选） */
[data-theme="dark"] {
    --card-bg: var(--dark-2);
    --navbar-bg: var(--dark);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
}