/* ============================================
   DESIGN TOKENS — Automation AI
   ============================================ */

:root {
  /* ── Backgrounds ── */
  --color-bg-primary:     #050508;
  --color-bg-secondary:   #080810;
  --color-bg-surface:     #0d0d1a;
  --color-bg-card:        rgba(255, 255, 255, 0.03);
  --color-bg-border:      rgba(255, 255, 255, 0.06);
  --color-bg-border-hover:rgba(139, 92, 246, 0.4);

  /* ── Brand — Purple/Violet ── */
  --color-brand-600:      #6d28d9;
  --color-brand-500:      #7c3aed;
  --color-brand-400:      #8b5cf6;
  --color-brand-300:      #a78bfa;
  --color-brand-200:      #c4b5fd;
  --color-brand-glow:     rgba(124, 58, 237, 0.35);
  --color-brand-glow-soft:rgba(139, 92, 246, 0.15);

  /* ── Text ── */
  --color-text-primary:   #f0f0ff;
  --color-text-secondary: #a0a0b8;
  --color-text-muted:     #5a5a78;
  --color-white:          #ffffff;

  /* ── Utility ── */
  --color-success:        #10b981;
  --color-warning:        #f59e0b;

  /* ── Gradient Definitions ── */
  --gradient-brand: linear-gradient(135deg, #f0f0ff 0%, #c4b5fd 40%, #8b5cf6 100%);
  --gradient-orb: radial-gradient(ellipse at center, #7c3aed 0%, #4c1d95 40%, transparent 70%);
  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% 60%, rgba(124,58,237,0.25) 0%, transparent 70%);
  --gradient-section: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(109,40,217,0.2) 0%, transparent 65%);

  /* ── Typography ── */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* Weight */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ── Spacing ── */
  --section-padding-y:   120px;
  --section-padding-y-sm: 72px;
  --container-max:       1200px;
  --container-pad:       24px;

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-glow:  0 0 60px var(--color-brand-glow);
  --shadow-glow-sm: 0 0 30px var(--color-brand-glow-soft);
  --shadow-btn:   0 0 24px rgba(124,58,237,0.5);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}