/**
 * 大数据实训平台 - CSS 变量设计系统
 * BigData Training Platform - Design System Variables
 */

:root {
  /* ========================================
     主色调 - Primary Colors (科技蓝)
     ======================================== */
  --primary-50: #E6F4FF;
  --primary-100: #BAE0FF;
  --primary-200: #8BCAFF;
  --primary-300: #5DB1FF;
  --primary-400: #3A9BFF;
  --primary-500: #1A85FF;
  --primary-600: #0F6FD9;
  --primary-700: #085BB3;
  --primary-800: #04478A;
  --primary-900: #023566;

  /* ========================================
     功能色 - Functional Colors
     ======================================== */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-300: #FCD34D;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --error-50: #FEF2F2;
  --error-100: #FEE2E2;
  --error-200: #FECACA;
  --error-300: #FCA5A5;
  --error-400: #F87171;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-700: #B91C1C;

  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-200: #BFDBFE;
  --info-300: #93C5FD;
  --info-400: #60A5FA;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1D4ED8;

  /* ========================================
     中性色 - Neutral Colors (深色主题)
     ======================================== */
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-elevated: #475569;
  --bg-overlay: rgba(15, 23, 42, 0.8);

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-disabled: #475569;

  --border-primary: #334155;
  --border-secondary: #1E293B;
  --border-focus: var(--primary-500);

  /* ========================================
     数据可视化色板 - Data Visualization
     ======================================== */
  --chart-1: #00D4AA;
  --chart-2: #00A8E8;
  --chart-3: #7B2CBF;
  --chart-4: #FF006E;
  --chart-5: #FB5607;
  --chart-6: #FFBE0B;

  /* ========================================
     字体系统 - Typography
     ======================================== */
  --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ========================================
     间距系统 - Spacing (4px base)
     ======================================== */
  --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;

  --section-gap: 24px;
  --card-gap: 16px;
  --content-padding: 24px;

  /* ========================================
     阴影系统 - Shadows
     ======================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(26, 133, 255, 0.3);
  --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.3);
  --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.3);
  --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3);

  /* ========================================
     圆角系统 - Border Radius
     ======================================== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ========================================
     布局尺寸 - Layout Dimensions
     ======================================== */
  --header-height: 64px;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --footer-height: 48px;

  /* ========================================
     过渡动画 - Transitions
     ======================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* ========================================
     Z-Index 层级
     ======================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ========================================
   亮色主题覆盖 - Light Theme Override
   ======================================== */
[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --bg-elevated: #E2E8F0;
  --bg-overlay: rgba(255, 255, 255, 0.9);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-disabled: #94A3B8;

  --border-primary: #E2E8F0;
  --border-secondary: #F1F5F9;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}