@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

/* SkyLuxe Aero Studio - NextGen UI Redesign Tokens */
:root {
  /* Brand Core Palette - Deep Obsidian & Electric Aero */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1; /* Electric Indigo */
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #1e1b4b;
  --primary-950: #0b0f19; /* Deep Aero Obsidian */

  /* Aero Cyan & Accent Sky */
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-light: rgba(6, 182, 212, 0.12);

  /* Secondary Accent (Vibrant Coral Rose) */
  --accent-400: #fb7185;
  --accent-500: #f43f5e;
  --accent-600: #e11d48;

  /* Conversion Hotline Orange */
  --call-orange: #f97316;
  --call-orange-hover: #ea580c;
  --call-orange-light: rgba(249, 115, 22, 0.12);
  --call-orange-glow: rgba(249, 115, 22, 0.45);

  /* Slate Neutrals & Obsidian Grays */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #070a13;

  /* Status Tokens */
  --success-500: #10b981;
  --success-light: rgba(16, 185, 129, 0.12);
  --warning-500: #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.12);
  --danger-500: #ef4444;
  --danger-light: rgba(239, 68, 68, 0.12);

  /* Dynamic Backgrounds & Glassmorphism Surfaces */
  --bg-page: #0b0f19;
  --bg-page-gradient: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0b0f19 70%);
  --bg-surface: #111827;
  --bg-surface-elevated: #1f2937;
  --bg-surface-muted: rgba(31, 41, 55, 0.6);
  --bg-glass: rgba(17, 24, 39, 0.75);
  --bg-glass-card: rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-glass-bright: rgba(99, 102, 241, 0.4);

  /* Light Theme / Hybrid Surfaces */
  --light-surface: #ffffff;
  --light-surface-muted: #f8fafc;
  --light-border: #e2e8f0;
  --light-text-main: #0f172a;
  --light-text-muted: #64748b;

  /* Typography Stacks */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Elevation Shadows & Multi-layer Glows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 36px -6px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.7);
  --shadow-glow-indigo: 0 0 35px rgba(99, 102, 241, 0.35);
  --shadow-glow-cyan: 0 0 35px rgba(6, 182, 212, 0.35);
  --shadow-glow-orange: 0 0 35px rgba(249, 115, 22, 0.4);

  /* Border Radii Scale */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Motion & Speed */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Breakpoint Containers */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1480px;

  /* Structural Dimensions */
  --header-height: 84px;
  --topbar-height: 38px;
  --mobile-bar-height: 72px;
}