/*
  Danzclub — Base de diseño (rediseño frontend, sección 12 del plan de mejoras)
  ------------------------------------------------------------------------------
  Este archivo define el sistema de diseño único del sitio (colores, tipografía,
  escalas de texto) que reemplaza la mezcla de turquesa/lavanda/marino repartida
  hoy entre all.css, style3.css y style2.css.

  Estructura tomada como referencia de Suruchi (_global.scss: bloque "1. Base
  CSS", :root + reset + tipografía base), adaptada con la paleta y tipografía
  ya decididas con el usuario. Es CSS plano, sin paso de compilación (decisión
  ya tomada en la sección 6 del plan: sin Sass/Mix en el proyecto).

  Este archivo NO reemplaza a style2.css/style3.css todavía — es la base nueva
  sobre la que se va a migrar página por página. Mientras convivan, style2/3
  siguen mandando en las vistas que aún no se migraron.
*/

:root {
  /* Paleta — decidida con el usuario (turquesa descartado) */
  --dz-primary: #9594D2;        /* Acento primario: botones CTA, badges, links */
  --dz-primary-hover: #706EBA;  /* Interacción, focus, active */
  --dz-urgency: #F43F5E;        /* Ofertas, descuentos, "últimas unidades" */

  --dz-bg-soft: #FAF9FB;        /* Fondo general alternado */
  --dz-surface: #FFFFFF;        /* Cards, header, contenedores */

  --dz-text: #18181B;           /* Texto primario: títulos, precios, énfasis */
  --dz-text-muted: #71717A;     /* Subtítulos, descripciones */

  --dz-border: #E4E4E7;         /* Divisores, selectores */
  --dz-footer-bg: #090A0F;      /* Footer y bloques de cierre */

  /* Tipografía — Poppins (títulos/CTA) + Inter (cuerpo) */
  --dz-font-heading: "Poppins", sans-serif;
  --dz-font-body: "Inter", sans-serif;

  --dz-body-font-size: 1.6rem;
  --dz-body-font-weight: 400;
  --dz-body-line-height: 2.6rem;
  --dz-headings-weight: 600;

  --dz-transition: all 0.3s ease 0s;
}

/* ------------------------------------------------------------------------
   Reset base — mismo enfoque de rem que ya usa el theme actual (html/body
   con font-size: 62.5%, o sea 1rem = 10px), para que esta base conviva sin
   fricción con el resto del sitio mientras se migra página por página.
------------------------------------------------------------------------ */
html.dz-base,
.dz-base body {
  font-size: 62.5%;
}

.dz-base body {
  font-family: var(--dz-font-body);
  font-size: var(--dz-body-font-size);
  font-weight: var(--dz-body-font-weight);
  line-height: var(--dz-body-line-height);
  color: var(--dz-text);
  background-color: var(--dz-surface);
}

.dz-base h1,
.dz-base h2,
.dz-base h3,
.dz-base h4,
.dz-base h5,
.dz-base h6 {
  font-family: var(--dz-font-heading);
  font-weight: var(--dz-headings-weight);
  color: var(--dz-text);
  margin: 0;
}

.dz-base h1 {
  font-size: 2.6rem;
  line-height: 3.2rem;
}
@media only screen and (min-width: 768px) {
  .dz-base h1 { font-size: 3.4rem; line-height: 4rem; }
}
@media only screen and (min-width: 1200px) {
  .dz-base h1 { font-size: 4.2rem; line-height: 5rem; }
}

.dz-base h2 {
  font-size: 2.2rem;
  line-height: 2.8rem;
}
@media only screen and (min-width: 768px) {
  .dz-base h2 { font-size: 2.6rem; line-height: 3.2rem; }
}
@media only screen and (min-width: 1200px) {
  .dz-base h2 { font-size: 3rem; line-height: 3.6rem; }
}

.dz-base h3 {
  font-size: 1.8rem;
  line-height: 2.4rem;
}
@media only screen and (min-width: 992px) {
  .dz-base h3 { font-size: 2rem; line-height: 2.6rem; }
}

.dz-base h4 { font-size: 1.6rem; line-height: 2.4rem; }
.dz-base h5 { font-size: 1.5rem; line-height: 2.2rem; font-weight: 500; }
.dz-base h6 { font-size: 1.4rem; line-height: 2rem; font-weight: 500; }

.dz-base p {
  color: var(--dz-text-muted);
  margin-top: 0;
  margin-bottom: 1.6rem;
}
.dz-base p:last-child { margin-bottom: 0; }

.dz-base a {
  color: inherit;
  text-decoration: none;
  transition: var(--dz-transition);
}
.dz-base a:hover {
  color: var(--dz-primary-hover);
}

/* ------------------------------------------------------------------------
   Utilidades básicas de la paleta, para usar directo en las vistas migradas
   (evitan repetir var(--dz-...) inline en cada Blade).
------------------------------------------------------------------------ */
.dz-btn-primary {
  display: inline-block;
  background-color: var(--dz-primary);
  color: var(--dz-surface);
  border: 1px solid var(--dz-primary);
  border-radius: 999px;
  padding: 1.2rem 2.8rem;
  font-family: var(--dz-font-heading);
  font-weight: 600;
  transition: var(--dz-transition);
}
.dz-btn-primary:hover {
  background-color: var(--dz-primary-hover);
  border-color: var(--dz-primary-hover);
  color: var(--dz-surface);
}

.dz-badge-urgency {
  display: inline-block;
  background-color: var(--dz-urgency);
  color: var(--dz-surface);
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  font-family: var(--dz-font-body);
  font-size: 1.2rem;
  font-weight: 600;
}

.dz-surface-soft { background-color: var(--dz-bg-soft); }
.dz-border { border-color: var(--dz-border); }