:root {
  /* Brand: Professional Blue · Indigo · Emerald · Slate */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  --color-secondary-400: #818cf8;
  --color-secondary-500: #6366f1;
  --color-secondary-600: #4f46e5;
  --color-secondary-700: #4338ca;

  --color-accent-400: #34d399;
  --color-accent-500: #10b981;
  --color-accent-600: #059669;

  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;

  --color-bg: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f8fafc;
  --color-bg-subtle: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 255, 255, 0.72);

  --color-text: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-inverse: #f8fafc;

  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-ring: rgba(37, 99, 235, 0.35);

  --gradient-hero: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 45%, #eef2ff 100%);
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  --gradient-accent: linear-gradient(135deg, #10b981 0%, #2563eb 100%);
  --gradient-mesh:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(37, 99, 235, 0.14), transparent 50%),
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(16, 185, 129, 0.1), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(79, 70, 229, 0.08), transparent 50%);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 235, 0.08), 0 20px 50px rgba(37, 99, 235, 0.15);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --font-sans: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-display: "Sora", "Plus Jakarta Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 1.5vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 1.8rem + 3vw, 4.25rem);
  --text-6xl: clamp(3.25rem, 2rem + 4vw, 5.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --container: 1200px;
  --container-wide: 1400px;
  --nav-height: 72px;
  --section-space: clamp(4rem, 6vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 2rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration: 300ms;
  --duration-slow: 500ms;

  --z-nav: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-toast: 1300;

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #020617;
  --color-bg-elevated: #0f172a;
  --color-bg-muted: #0b1220;
  --color-bg-subtle: #111827;
  --color-surface: #0f172a;
  --color-surface-glass: rgba(15, 23, 42, 0.78);

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #0f172a;

  --color-border: #1e293b;
  --color-border-strong: #334155;
  --color-ring: rgba(96, 165, 250, 0.4);

  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #052e1a 100%);
  --gradient-mesh:
    radial-gradient(ellipse 80% 60% at 15% 5%, rgba(37, 99, 235, 0.22), transparent 50%),
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(16, 185, 129, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 95%, rgba(79, 70, 229, 0.14), transparent 50%);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 20px 50px rgba(37, 99, 235, 0.25);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}