/* 
  FoxBox Dashboard - Design System 
  Style: Modern Soft Glassmorphism
  Default: Dark Mode
*/

:root {
  /* === Color Palette (Dark Default) === */
  --bg-body: #0f172a; /* Deep Slate */
  --bg-surface: rgba(30, 41, 59, 0.7); /* Glassy Surface */
  --bg-surface-hover: rgba(51, 65, 85, 0.8);
  
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --primary: #3b82f6; /* Blue 500 */
  --primary-glow: rgba(59, 130, 246, 0.5);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #06b6d4;

  /* === Glassmorphism Effects === */
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --glass-blur: blur(12px);
  
  /* === Spacing & Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* === Typography === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* === Light Theme Overrides === */
[data-theme="light"] {
  --bg-body: #f8fafc; /* Slate 50 */
  --bg-surface: rgba(255, 255, 255, 0.7);
  --bg-surface-hover: rgba(241, 245, 249, 0.8);
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --glass-border: 1px solid rgba(0, 0, 0, 0.05);
  --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}