/* tokens.css — Variables de diseño.
   Colores copiados de "Landing fb ads" (paleta brand + slate).
   Cambiá aquí cualquier color, fuente o medida y se actualiza en toda la landing. */

:root {
  /* Colores — paleta de "Landing fb ads" */
  --bg:           #09090b;               /* slate-950 — Fondo de la página */
  --card:         #18181b;               /* slate-900 — Tarjetas y contenedores */
  --border:       #27272a;               /* slate-800 — Bordes y divisores */
  --accent:       #3b82f6;               /* brand-500 — Color de marca / detalles */
  --accent-hover: #60a5fa;               /* brand-400 — Hover de botones */
  --accent-bg:    rgba(59,130,246,0.10); /* Fondo suave del color de marca */
  --cta:          #3b82f6;               /* brand-500 — Botón principal */
  --cta-glow:     rgba(59,130,246,0.30); /* Resplandor del botón */
  --text:         #fafafa;               /* slate-50 — Texto principal */
  --muted:        #a1a1aa;               /* slate-400 — Texto secundario */
  --success:      #00c471;               /* Estado de éxito (formulario enviado) */

  /* Sección de reseñas — fondo claro estilo "temario" de Landing fb ads */
  --reviews-bg:   #f2f0e9;               /* Beige del bloque de reseñas */
  --reviews-text: #18181b;               /* slate-900 — Texto sobre el beige */

  /* Tipografía */
  --fh: 'Montserrat', sans-serif;        /* Títulos */
  --fb: 'DM Sans', sans-serif;           /* Cuerpo de texto */
}