/* ── Tokens de diseño · Paleta real de scalonagency.com ── */
:root {
  /* Colores */
  --bg-primary:    #060B09;
  --bg-secondary:  #0A0F0D;
  --bg-surface:    #0D1A14;
  --accent-1:      #00D4AA;
  --accent-1-dark: #00A88A;
  --accent-2:      #4ADE80;
  --accent-3:      #06D6A0;
  --text-primary:  #F0FDF4;
  --text-secondary:#94A3B8;
  --text-muted:    #64748B;
  --border:        rgba(0, 212, 170, 0.12);
  --border-hover:  rgba(0, 212, 170, 0.30);

  /* Gradientes de marca */
  --gradient-primary: linear-gradient(135deg, #06D6A0 0%, #00D4AA 50%, #4ADE80 100%);
  --gradient-text:    linear-gradient(135deg, #FFFFFF 0%, #B0F0D6 50%, #4ADE80 100%);
  --gradient-card:    linear-gradient(145deg, rgba(0,212,170,0.08) 0%, rgba(74,222,128,0.04) 100%);

  /* Tipografía */
  --font-display: 'Clash Display', 'Cabinet Grotesk', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Escala tipográfica */
  --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-hero: clamp(2.4rem, 5vw, 4.4rem); /* cabe en laptops 1080p sin chocar con el nav */
  --text-section: clamp(2rem, 4.5vw, 3.5rem);

  /* Espaciado */
  --space-section: clamp(5rem, 10vw, 10rem);
  --max-width: 1280px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* Bordes y radios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Sombras */
  --shadow-card: 0 4px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow-accent: 0 0 40px rgba(0, 212, 170, 0.20);
  --shadow-glow-green:  0 0 40px rgba(74, 222, 128, 0.15);
}