/**
 * Design tokens — startup / SaaS local services
 */
:root {
  /* Neutrals */
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-500: #64748B;
  --color-gray-700: #334155;
  --color-gray-900: #0F172A;
  --color-gray-950: #020617;

  /* Brand */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #DBEAFE;
  --color-primary-foreground: #ffffff;

  --color-accent: #FBBF24;
  --color-accent-brand: #F59E0B;
  --color-accent-hover: #D97706;
  --color-accent-glow: rgba(251, 191, 36, 0.35);

  --color-electric: #38BDF8;
  --color-success: #10B981;
  --color-whatsapp: #22C55E;

  /* Surfaces */
  --color-background: #FAFBFC;
  --color-background-alt: #F1F5F9;
  --color-foreground: #0F172A;
  --color-card: #ffffff;
  --color-card-foreground: #0F172A;
  --color-muted: #F1F5F9;
  --color-muted-foreground: #64748B;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.12);

  /* Dark surfaces */
  --color-dark: #0B1220;
  --color-dark-elevated: #131C2E;
  --color-dark-border: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  --font-size-hero: clamp(2.25rem, 5vw + 1rem, 4rem);

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

  /* Radius — startup soft */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 235, 0.08), 0 12px 40px rgba(37, 99, 235, 0.15);
  --shadow-card-hover: 0 20px 40px rgba(15, 23, 42, 0.1);

  /* Layout */
  --container-max: 1180px;
  --header-height: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.25s;

  /* Gradients */
  --gradient-hero: radial-gradient(ellipse 80% 60% at 70% -10%, rgba(56, 189, 248, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(37, 99, 235, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, #0B1220 0%, #0F172A 50%, #131C2E 100%);
  --gradient-accent: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-mesh: conic-gradient(from 180deg at 50% 50%, #1E3A8A, #0B1220, #172554, #0B1220);
}