/* =============================================================================
   tokens.css — Variables de marca
   -----------------------------------------------------------------------------
   Cambiando los valores de este archivo se reajusta toda la identidad visual
   del sitio sin tocar una sola regla de styles.css.
   ========================================================================== */

:root {
  /* --- Paleta: cálida y humana ------------------------------------------- */
  --color-arena: #faf7f2; /* fondo principal */
  --color-arena-2: #f3ede4; /* fondo de secciones alternas */
  --color-arena-3: #e8dfd2; /* bordes suaves, separadores */
  --color-crema: #fffdfa; /* superficies elevadas (tarjetas) */

  --color-tinta: #2c2a26; /* texto principal */
  --color-tinta-suave: #5a544c; /* texto secundario */
  --color-tinta-tenue: #8a8278; /* metadatos, leyendas */

  --color-salvia: #6b8e6f; /* acento principal */
  --color-salvia-osc: #4e6b52; /* acento sobre fondo claro (contraste AA) */
  --color-salvia-claro: #dfe8df; /* fondos de badge, estados hover */
  --color-terracota: #b5714f; /* acento secundario, destacados */

  --color-whatsapp: #25d366;
  --color-whatsapp-osc: #128c7e;

  --color-error: #a8442f;

  /* --- Tipografía --------------------------------------------------------- */
  --font-titulo: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --font-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: se adapta sola entre móvil y escritorio */
  --texto-xs: 0.78rem;
  --texto-sm: 0.875rem;
  --texto-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --texto-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --texto-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --texto-2xl: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --texto-3xl: clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --texto-4xl: clamp(2.4rem, 1.9rem + 2.5vw, 3.75rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --interlinea-ajustada: 1.15;
  --interlinea-titulo: 1.22;
  --interlinea-cuerpo: 1.7;

  /* --- Espaciado ---------------------------------------------------------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;

  /* Relleno vertical de cada sección: se duplica entre una y la siguiente,
     así que 5rem acá son 10rem de aire entre bloques. */
  --seccion-y: clamp(3rem, 1.75rem + 3.25vw, 5rem);
  --ancho-max: 1180px;
  --ancho-texto: 68ch;
  --borde-pagina: clamp(1.25rem, 4vw, 3rem);

  /* --- Formas ------------------------------------------------------------- */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --radio-xl: 28px;
  --radio-full: 999px;

  --sombra-sm: 0 1px 2px rgba(44, 42, 38, 0.06),
    0 2px 8px rgba(44, 42, 38, 0.04);
  --sombra-md: 0 2px 4px rgba(44, 42, 38, 0.05),
    0 8px 24px rgba(44, 42, 38, 0.07);
  --sombra-lg: 0 4px 10px rgba(44, 42, 38, 0.06),
    0 20px 50px rgba(44, 42, 38, 0.12);

  /* --- Movimiento --------------------------------------------------------- */
  --trans-rapida: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-media: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-lenta: 620ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Capas -------------------------------------------------------------- */
  --z-header: 100;
  --z-flotante: 200;
  --z-modal: 300;
}