/* ============================================================
   ALLBASE DESIGN SYSTEM - VARIABLES & THEME TOKENS
   Static Portfolio & Tools Hub - White & Blue Modern Theme
   ============================================================ */

:root, html[data-theme="light"] {
  --primary-dark: #0F3D91;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-light: #60A5FA;
  --primary-soft: #DCEEFF;
  
  --background: #F7FAFF;
  --surface: #FFFFFF;
  --surface-secondary: #F1F5F9;
  --border: #DCE5F2;
  --border-hover: #2563EB;
  
  --text-primary: #172033;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  
  --success: #16A34A;
  --success-soft: #DCFCE7;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px -2px rgba(37, 99, 235, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px -5px rgba(37, 99, 235, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.2);
  
  --font-heading: 'Outfit', 'Sora', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] {
  --primary-dark: #60A5FA;
  --primary: #3B82F6;
  --primary-hover: #60A5FA;
  --primary-light: #93C5FD;
  --primary-soft: rgba(59, 130, 246, 0.15);
  
  --background: #081225;
  --surface: #0F1B32;
  --surface-secondary: #182744;
  --border: #203150;
  --border-hover: #60A5FA;
  
  --text-primary: #E8F0FF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  
  --success: #22C55E;
  --success-soft: rgba(34, 197, 94, 0.15);
  --warning: #F59E0B;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.15);
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
}