/* ==========================================================================
   Zoled · Tokens de diseño
   Fuente: PRD_Zoled_Landing_Headless.md §3.1-3.3 (valores textuales).
   Espejo de la paleta de theme.json (settings.color.palette): esta es la ÚNICA
   otra copia autorizada de los valores hex/rgba. Cualquier otra regla de estilo
   debe referenciar el color solo con var(--…). No escribir hex crudos fuera de
   este archivo.
   ========================================================================== */

:root {
  /* -- 3.1 Colores base --------------------------------------------------- */
  --blanco: #FFFFFF;
  --negro: #0B0B0B;
  --grafito: #1C1C1C;
  --hueso: #F4F4F2;
  --filete: #E4E4E0;
  --gris: #DAD7D2;
  --humo: #6A6A66;
  --plomo: #4A4A46;

  /* Hover del botón primario (§3): #2A2A28, NO invertir a --grafito. */
  --negro-hover: #2A2A28;

  /* -- Colores por línea (fondo suave / tinta para texto sobre claro) ----- */
  --rosa: #F3C3CE;        --rosa-ink: #A2586F;      /* Nutrición */
  --verde: #CFE6D9;       --verde-ink: #3E7A5B;     /* Equilibrio */
  --amarillo: #F4DE9B;    --amarillo-ink: #8E7020;  /* Densidad */
  --gris-ink: #6B6864;                              /* Madurez (usa --gris) */
  --celeste: #7FC9EE;     --celeste-ink: #1F6E92;   /* Solecito */
  /* Men usa --negro / --grafito */

  --sol: #F6D66B;         /* sol cálido de la marca */
  --oro: #B8934A;         /* marca de agua sol en dorado */
  --exito: #2E6B4F;
  --error: #A32F2F;

  /* -- Velos y capas translúcidas ----------------------------------------
     Tokens creados durante el porte para eliminar rgba() sueltos del CSS.
     Velos oscuros sobre 11,11,11 (--negro) para overlays de menú/modal. */
  --velo: rgba(11, 11, 11, 0.42);          /* velo del drawer móvil (§5) */
  --velo-modal: rgba(11, 11, 11, 0.45);    /* fondo de drawer bolsa + modales */

  /* Blanco translúcido para textos/bordes sobre fondos oscuros. */
  --blanco-70: rgba(255, 255, 255, 0.70);  /* kicker--light */
  --blanco-72: rgba(255, 255, 255, 0.72);  /* textos sobre negro (banner/pro) */
  --blanco-75: rgba(255, 255, 255, 0.75);  /* tag--soon texto */
  --blanco-30: rgba(255, 255, 255, 0.30);  /* tag--soon borde */
  --blanco-25: rgba(255, 255, 255, 0.25);  /* borde de pay-chip */
  --blanco-12: rgba(255, 255, 255, 0.12);  /* separador del footer__pay */

  /* -- 3.2 Tipografía ----------------------------------------------------- */
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dato: "Space Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Escala fluida de títulos (clamp según PRD §3.2) */
  --fs-h1: clamp(26px, 2.4vw + 10px, 40px);
  --fs-h2: clamp(24px, 1.4vw + 12px, 29px);
  --fs-h3: clamp(16px, 0.6vw + 12px, 20px);
  --fs-lead: 14.5px;
  --lh-lead: 1.6;

  /* -- 3.3 Forma / sombra / movimiento ------------------------------------ */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 38px;
  --r-pill: 999px;

  --sombra-2: 0 2px 8px rgba(11, 11, 11, .07);
  --sombra-3: 0 8px 24px rgba(11, 11, 11, .10);
  --sombra-4: 0 16px 48px rgba(11, 11, 11, .16);

  --vel-2: 200ms;
  --vel-3: 320ms;
  --curva: cubic-bezier(.4, 0, .2, 1);

  /* -- Maquetación -------------------------------------------------------- */
  --container: 1328px; /* caja del contenedor: el contenido queda ~1280 con el gutter de 24 (fiel al prototipo) */
  --gutter: 24px;
  --gutter-mobile: 16px;

  /* Ritmo de sección (PRD §4: ~80px escritorio / ~56px móvil) */
  --section-y: 80px;
  --section-y-mobile: 56px;
}