/* Syncrozon Design System Variables & Base Tokens */
:root {
  /* Color Palette - Navy Blue Primary Theme (Dark Mode Default) */
  --bg-primary: #070d19;
  --bg-secondary: #0b1528;
  --bg-tertiary: #11213d;
  --bg-card: rgba(15, 28, 54, 0.7);
  --bg-card-hover: rgba(22, 40, 77, 0.85);
  --bg-glass: rgba(11, 21, 40, 0.65);
  
  --border-color: rgba(45, 85, 145, 0.25);
  --border-glow: rgba(56, 189, 248, 0.4);
  
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #0B0245;
  
  --brand-navy: #0a192f;
  --brand-blue: #1e40af;
  --brand-blue-hover: #2563eb;
  --brand-cyan: #0B0245;
  --brand-cyan-light: #0B0245;
  --brand-accent: #6366f1;
  --brand-emerald: #10b981;
  --brand-amber: #f59e0b;
  
  --gradient-brand: linear-gradient(135deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
  --gradient-navy: linear-gradient(180deg, #070d19 0%, #0b1528 100%);
  --gradient-card: linear-gradient(135deg, rgba(30, 58, 138, 0.15) 0%, rgba(15, 28, 54, 0.4) 100%);
  --gradient-glow: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(7, 13, 25, 0) 70%);

  /* Shadows & Glass */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 25px rgba(56, 189, 248, 0.25);
  --shadow-emerald: 0 0 20px rgba(16, 185, 129, 0.3);

  --backdrop-blur: blur(16px);

  /* Spacing & Sizing */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Container */
  --container-max: 1240px;
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Light Theme Overrides */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.75);

  --border-color: rgba(203, 213, 225, 0.8);
  --border-glow: rgba(30, 64, 175, 0.3);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-accent: #0284c7;

  --brand-navy: #0f172a;
  --brand-blue: #2563eb;
  --brand-blue-hover: #1d4ed8;

  --gradient-navy: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-card: linear-gradient(135deg, rgba(241, 245, 249, 0.8) 0%, rgba(255, 255, 255, 0.95) 100%);
  --gradient-glow: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(248, 250, 252, 0) 70%);

  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 25px rgba(37, 99, 235, 0.15);
}