/* ============================================================
   RETO COCINA INTELIGENTE — Design Tokens / Línea Gráfica
   ------------------------------------------------------------
   Valores PRELIMINARES extraídos de las referencias de Canva
   (_referencia-original/). CONFIRMAR / AJUSTAR cuando llegue la
   línea gráfica oficial (HEX exactos y tipografías).
   👉 Cambiar acá actualiza TODA la landing.
   ============================================================ */

:root {
  /* ---- Colores de marca ---- */
  --color-verde:       #4FBB84;  /* Verde Esmeralda Suave (logo, acentos) */
  --color-verde-osc:   #2F8F5B;  /* verde oscuro (titulares)              */
  --color-verde-cta:   #4FBB84;  /* verde botón "Registrarme ahora"       */
  --color-coral:       #C4712D;  /* Naranja Terracota ("fácil y rico")    */
  --color-carbon:      #171717;  /* Negro Profundo (texto / "Reto")       */
  --color-crema:       #FAF7F3;  /* Blanco Marfil Suave (fondo)           */
  --color-arena:       #F1E4D9;  /* Beige Arena Suave                     */
  --color-blanco:      #FFFFFF;
  --color-linea:       #DCC9B6;  /* ilustraciones line-art (beige)        */
  --color-texto:       #2A2A2A;
  --color-texto-suave: #6B6B6B;
  --color-borde:       #E6E1D6;

  /* ---- Tipografías (oficiales: Now → Poppins como sustituta; + Livvic) ---- */
  --font-titulo: 'Poppins', 'Livvic', system-ui, -apple-system, sans-serif;
  --font-cuerpo: 'Livvic', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---- Escala tipográfica (fluida) ---- */
  --fs-hero:  clamp(2rem, 5vw, 3.5rem);
  --fs-h2:    clamp(1.5rem, 3.5vw, 2.5rem);
  --fs-h3:    clamp(1.2rem, 2.5vw, 1.6rem);
  --fs-body:  clamp(1rem, 1.6vw, 1.125rem);
  --fs-small: 0.875rem;

  /* ---- Espaciado ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* ---- Layout ---- */
  --max-width:   1140px;
  --radius:      999px;   /* botones tipo píldora */
  --radius-card: 18px;
  --shadow:      0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-sm:   0 4px 14px rgba(0, 0, 0, 0.06);

  /* ---- Transiciones ---- */
  --transition: 0.25s ease;
}
