/**
 * DR. EVERT HAIR INSTITUTE — Design tokens
 * ============================================================================
 * Fuente de verdad: manual de marca (PDF, julio 2026) vía CLAUDE.md §2.
 *
 * Estas son las ÚNICAS variables de marca del proyecto. Ninguna hoja de estilo,
 * bloque o plugin debe escribir un color, tamaño de fuente o espaciado "a mano":
 * siempre se referencia una variable de aquí. Así, si el doctor cambia un tono,
 * se cambia en un solo sitio y el sitio entero lo hereda.
 *
 * Duplicado a propósito en theme.json (paleta y tipografía del editor de
 * bloques) — si cambias un valor aquí, cámbialo también allí.
 * ============================================================================
 */

:root {
  /* ------------------------------------------------------------------ */
  /* 1. COLOR — paleta de marca (CLAUDE.md §2)                          */
  /* ------------------------------------------------------------------ */

  --dr-negro:  #141414; /* Primario oscuro — fondos, header/footer            */
  --dr-oro:    #B8924A; /* Acento principal — CTAs, separadores (Pantone 1245C)*/
  --dr-arena:  #C8A96E; /* Acento claro — hovers, badges                      */
  --dr-hueso:  #E2D9C8; /* Neutro claro — fondos alternos, texto sobre negro  */
  --dr-gris:   #7A7A7A; /* Neutro medio — texto secundario, captions          */
  --dr-cafe:   #5C3D1E; /* Marrón profundo — detalles, degradados con oro     */

  /* Extensiones neutrales derivadas (no son colores de marca nuevos: son el
     negro y el hueso ajustados para bordes, superficies y estados). */
  --dr-negro-800: #1E1E1E; /* Superficie elevada sobre negro (cards)          */
  --dr-negro-700: #2A2A2A; /* Bordes sutiles en modo oscuro                   */
  --dr-hueso-200: #F1EBE0; /* Hueso aclarado — fondos muy suaves              */
  --dr-hueso-400: #CFC3AC; /* Bordes sobre fondo hueso                        */
  --dr-blanco:    #FFFFFF;

  /* Estados de formulario (cotizador, valorador, Fluent Forms) */
  --dr-error:   #B3261E;
  --dr-exito:   #2E6B4F;
  --dr-aviso:   #8A6D1F;

  /* ------------------------------------------------------------------ */
  /* 2. COLOR SEMÁNTICO — dark-first (CLAUDE.md §2, tono de marca)      */
  /* ------------------------------------------------------------------ */
  /* Estos son los que se usan al maquetar. Las secciones claras invierten
     estos valores con la clase .dr-seccion--clara (ver más abajo).      */

  --dr-fondo:              var(--dr-negro);
  --dr-fondo-elevado:      var(--dr-negro-800);
  --dr-texto:              var(--dr-hueso);
  --dr-texto-tenue:        var(--dr-gris);
  --dr-texto-fuerte:       var(--dr-blanco);
  --dr-borde:              var(--dr-negro-700);
  --dr-acento:             var(--dr-oro);
  --dr-acento-hover:       var(--dr-arena);
  --dr-sobre-acento:       var(--dr-negro); /* texto encima del oro */

  /* ------------------------------------------------------------------ */
  /* 3. TIPOGRAFÍA (CLAUDE.md §2)                                        */
  /* ------------------------------------------------------------------ */

  /* Optima Nova LT Light: títulos/display. Montserrat Variable: cuerpo/UI. */
  --dr-fuente-display: "Optima Nova LT", "Optima", "Palatino Linotype", Georgia, serif;
  --dr-fuente-cuerpo:  "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Pesos — Montserrat variable, rango útil 300–600 (§2) */
  --dr-peso-ligero:  300;
  --dr-peso-normal:  400; /* cuerpo */
  --dr-peso-medio:   500; /* labels */
  --dr-peso-semi:    600; /* botones, énfasis */

  /* Escala tipográfica fluida (clamp: móvil -> escritorio, sin media queries).
     La base de 16px nunca baja: accesibilidad y legibilidad en móvil. */
  --dr-texto-xs:   0.75rem;                              /* 12px  captions   */
  --dr-texto-sm:   0.875rem;                             /* 14px  labels     */
  --dr-texto-base: 1rem;                                 /* 16px  cuerpo     */
  --dr-texto-md:   clamp(1.0625rem, 0.4vw + 0.97rem, 1.125rem);   /* 17-18px */
  --dr-texto-lg:   clamp(1.25rem,  0.8vw + 1.07rem, 1.5rem);      /* 20-24px */
  --dr-texto-xl:   clamp(1.5rem,   1.4vw + 1.19rem, 2rem);        /* 24-32px */
  --dr-texto-2xl:  clamp(1.875rem, 2.2vw + 1.39rem, 2.75rem);     /* 30-44px */
  --dr-texto-3xl:  clamp(2.25rem,  3.6vw + 1.44rem, 3.75rem);     /* 36-60px */
  /* El min() del hero evita partir palabras largas en móvil ("TRICOSCÓPICO",
     16-ago): el título nunca pasa del 8.6% del ancho de pantalla, así la
     palabra más larga del sitio cabe entera. En escritorio no cambia nada.
     (El "hero" fluido de theme.json no puede expresar este tope: divergencia
     solo visible en la vista móvil del editor.) */
  --dr-texto-4xl:  min(clamp(2.75rem, 5.2vw + 1.59rem, 5rem), 8.6vw); /* 44-80px hero */

  /* Interlineado */
  --dr-interlineado-apretado: 1.1;  /* títulos grandes */
  --dr-interlineado-titulo:   1.2;
  --dr-interlineado-normal:   1.65; /* cuerpo — generoso, lectura larga */

  /* Tracking. El logo usa mayúsculas muy espaciadas: --dr-tracking-display
     replica ese gesto y es lo que da el aire premium de la marca (§2). */
  --dr-tracking-display:   0.14em; /* TÍTULOS EN MAYÚSCULA, estilo logo */
  --dr-tracking-eyebrow:   0.22em; /* antetítulos / etiquetas de sección */
  --dr-tracking-boton:     0.08em;
  --dr-tracking-normal:    0em;

  /* ------------------------------------------------------------------ */
  /* 4. ESPACIADO — escala base 4px                                      */
  /* ------------------------------------------------------------------ */

  --dr-esp-3xs: 0.25rem;  /*  4px */
  --dr-esp-2xs: 0.5rem;   /*  8px */
  --dr-esp-xs:  0.75rem;  /* 12px */
  --dr-esp-sm:  1rem;     /* 16px */
  --dr-esp-md:  1.5rem;   /* 24px */
  --dr-esp-lg:  2rem;     /* 32px */
  --dr-esp-xl:  3rem;     /* 48px */
  --dr-esp-2xl: 4rem;     /* 64px */
  --dr-esp-3xl: 6rem;     /* 96px */
  --dr-esp-4xl: 8rem;     /* 128px */

  /* Aire vertical entre secciones de página (fluido móvil -> escritorio) */
  --dr-seccion-y: clamp(3.5rem, 7vw, 7rem);

  /* Distancias del hero (franja → antetítulo, y antetítulo → título).
     Medida exacta aprobada por el cliente el 15-ago: iguales entre sí. */
  --dr-hero-distancia: 75px;

  /* Arranque de la animación de la franja de títulos: el oro de marca
     (decisión del cliente, 15-ago — antes probó hueso y gris al 30%). */
  --dr-franja-piel: var(--dr-oro);

  /* ------------------------------------------------------------------ */
  /* 5. LAYOUT                                                           */
  /* ------------------------------------------------------------------ */

  --dr-ancho-contenido: 1200px; /* contenedor estándar */
  --dr-ancho-ancho:     1440px; /* secciones anchas (galerías, hero) */
  --dr-ancho-texto:     68ch;   /* medida de lectura cómoda (blog) */
  --dr-margen-lateral:  clamp(1.25rem, 5vw, 3rem);

  /* ------------------------------------------------------------------ */
  /* 6. BORDES, SOMBRAS Y MOVIMIENTO                                     */
  /* ------------------------------------------------------------------ */

  /* Radios discretos: la marca es sobria, no redondeada tipo startup. */
  --dr-radio-sm:   2px;
  --dr-radio-md:   4px;
  --dr-radio-lg:   8px;
  --dr-radio-full: 999px; /* botón WhatsApp flotante, badges */

  --dr-borde-fino: 1px solid var(--dr-borde);
  --dr-borde-oro:  1px solid var(--dr-oro);

  --dr-sombra-sm: 0 1px 3px rgb(0 0 0 / 0.18);
  --dr-sombra-md: 0 6px 20px rgb(0 0 0 / 0.22);
  --dr-sombra-lg: 0 16px 48px rgb(0 0 0 / 0.30);

  --dr-transicion-rapida: 150ms ease;
  --dr-transicion:        250ms ease;
  --dr-transicion-lenta:  400ms cubic-bezier(0.4, 0, 0.2, 1);

  /*
   * Dos degradados de oro, y la diferencia importa:
   *
   * --dr-degradado-oro       Decorativo. Va en separadores y filetes finos, donde
   *                          nunca se posa texto encima. Incluye el café del §2.
   *
   * --dr-degradado-superficie  Para fondos CON TEXTO encima. Empieza en oro, no
   *                          en café: sobre café (#5C3D1E) el texto negro queda
   *                          en 1,9:1 de contraste, ilegible. De oro a arena se
   *                          mantiene entre 6,8:1 y 9,4:1, que sí cumple.
   */
  --dr-degradado-oro: linear-gradient(120deg, var(--dr-cafe) 0%, var(--dr-oro) 45%, var(--dr-arena) 100%);
  --dr-degradado-superficie: linear-gradient(120deg, var(--dr-oro) 0%, var(--dr-arena) 100%);

  /* ------------------------------------------------------------------ */
  /* 7. CAPAS (z-index) — evita la guerra de números mágicos             */
  /* ------------------------------------------------------------------ */

  --dr-z-base:      1;
  --dr-z-sticky:    100; /* cabecera fija */
  --dr-z-whatsapp:  200; /* botón flotante de WhatsApp */
  --dr-z-overlay:   300; /* menú móvil a pantalla completa */

  /* La cabecera sube POR ENCIMA del menú móvil mientras está abierto. Si no,
     el propio menú tapa el botón de cerrar y no hay forma de salir. */
  --dr-z-cabecera-abierta: 310;

  --dr-z-modal:     400; /* cotizador / valorador a pantalla completa */
}

/* ==========================================================================
   Secciones claras — el respiro visual en hueso que pide el §2.
   Se aplica como clase a una sección y todo lo de dentro se adapta solo.
   ========================================================================== */

.dr-seccion--clara {
  --dr-fondo:         var(--dr-hueso);
  --dr-fondo-elevado: var(--dr-hueso-200);
  --dr-texto:         var(--dr-negro);
  --dr-texto-tenue:   var(--dr-gris);
  --dr-texto-fuerte:  var(--dr-negro);
  --dr-borde:         var(--dr-hueso-400);
  --dr-acento:        var(--dr-cafe); /* el oro sobre hueso no contrasta lo suficiente */
  --dr-acento-hover:  var(--dr-negro);
  --dr-sobre-acento:  var(--dr-hueso);

  /* La paleta de botones de Kadence se re-declara aquí a propósito: las
     variables definidas en body se resuelven allí (con los colores del modo
     oscuro) y quedan congeladas; re-declarándolas en cada tono de sección,
     cualquier regla de Kadence que las use pinta el color correcto. */
  --global-palette-btn-out: var(--dr-texto);

  background-color: var(--dr-fondo);
  color: var(--dr-texto);
}

.dr-seccion--oscura {
  --dr-fondo:         var(--dr-negro);
  --dr-fondo-elevado: var(--dr-negro-800);
  --dr-texto:         var(--dr-hueso);
  --dr-texto-tenue:   var(--dr-gris);
  --dr-texto-fuerte:  var(--dr-blanco);
  --dr-borde:         var(--dr-negro-700);
  --dr-acento:        var(--dr-oro);
  --dr-acento-hover:  var(--dr-arena);
  --dr-sobre-acento:  var(--dr-negro);

  /* Ver la nota equivalente en .dr-seccion--clara. */
  --global-palette-btn-out: var(--dr-texto);

  background-color: var(--dr-fondo);
  color: var(--dr-texto);
}

/* Respeta a quien pide menos animación en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dr-transicion-rapida: 0ms;
    --dr-transicion:        0ms;
    --dr-transicion-lenta:  0ms;
  }
}