/* ========================================
   StartPro Design Tokens — Premium Light
   ======================================== */

:root {
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fc;
  --bg-tertiary: #f1f3f8;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-dark: #0c1222;
  --bg-dark-secondary: #131b30;

  /* Accent — Deep refined blue */
  --accent-primary: #2563eb;
  --accent-secondary: #1d4ed8;
  --accent-dark: #1e3a5f;
  --accent-gradient: linear-gradient(135deg, #2563eb, #1d4ed8);
  --accent-gradient-hover: linear-gradient(135deg, #3b82f6, #2563eb);
  --accent-glow: rgba(37, 99, 235, 0.08);
  --accent-glow-strong: rgba(37, 99, 235, 0.15);

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-accent: #2563eb;
  --text-on-dark: #f1f5f9;
  --text-on-dark-secondary: #94a3b8;

  /* Borders */
  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-accent: rgba(37, 99, 235, 0.25);

  /* Semantic */
  --success: #16a34a;
  --error: #dc2626;

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --text-5xl: clamp(3rem, 2rem + 3.5vw, 4.5rem);
  --text-hero: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-padding: clamp(1rem, 3vw, 3rem);

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows — premium depth */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.1);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.08), 0 0 0 1px rgba(37,99,235,0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}