/* ==========================================================================
   variables.css — Tokens de diseño (única fuente de verdad de los valores).
   Extraídos del sitio original (Tailwind/shadcn tema "zinc" + acento azul).
   Si un valor se repite, vive aquí.
   ========================================================================== */

:root {
  /* ---- Paleta (escala neutra de grises + azul de acento del original) ---- */
  --color-white:        #ffffff;
  --color-black:        #000000;
  --color-gray-50:      #f9fafb;
  --color-gray-100:     #f3f4f6;
  --color-gray-200:     #e5e7eb;
  --color-gray-300:     #d1d5db;
  --color-gray-400:     #9ca3af;
  --color-gray-500:     #6b7280;
  --color-gray-600:     #4b5563;
  --color-gray-700:     #374151;
  --color-gray-800:     #1f2937;
  --color-gray-900:     #111827;

  --color-accent:       #2563eb;   /* azul-600: botones, enlaces, focus */
  --color-accent-dark:  #1d4ed8;   /* azul-700: hover */
  --color-accent-soft:  #eff6ff;   /* azul-50: fondos suaves */

  /* ---- Roles semánticos (usar estos en los componentes) ---- */
  --color-bg:           var(--color-white);
  --color-bg-alt:       var(--color-gray-50);
  --color-bg-dark:      var(--color-gray-900);
  --color-surface:      var(--color-white);
  --color-text:         var(--color-gray-900);
  --color-text-muted:   var(--color-gray-500);
  --color-text-invert:  var(--color-white);
  --color-border:       var(--color-gray-200);
  --color-primary:      var(--color-gray-900);
  --color-primary-hover: var(--color-gray-700);
  --color-link:         var(--color-accent);
  --color-whatsapp:     #25d366;
  --color-whatsapp-dark:#1ebe5a;
  --color-gold:         #d6a93b;   /* badge "Destacada" */
  --color-gold-ink:     #3a2a00;

  /* ---- Tipografía ---- */
  --font-base: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-6xl:  3.75rem;   /* 60 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  /* ---- Espaciado (escala 4px) ---- */
  --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;

  /* ---- Radios ---- */
  --radius-sm:   0.375rem;
  --radius:      0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-full: 9999px;

  /* ---- Sombras ---- */
  --shadow-sm:  0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow:     0 1px 3px rgba(17, 24, 39, 0.10), 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md:  0 4px 12px rgba(17, 24, 39, 0.10);
  --shadow-lg:  0 12px 28px rgba(17, 24, 39, 0.14);

  /* ---- Layout ---- */
  --container:      80rem;   /* 1280px */
  --container-text: 48rem;   /* 768px para bloques de texto */
  --header-height:  4.5rem;

  /* ---- Transiciones ---- */
  --transition:      180ms ease;
  --transition-slow: 300ms ease;
}