/* ==========================================================================
   Digital Empire Solutions — plantilla de roofing
   tokens.css — el único lugar donde vive el sistema visual.

   COLOR: cinco valores declarados. Ni uno más. Todo lo demás (filetes, texto
   secundario, estados) se deriva de esos cinco con color-mix(). Si hace falta
   un sexto valor, algo se está decorando.

   Los cinco salen de la flota rotulada y el logo del cliente, no de una
   elección estética. En un alta de cliente se sustituyen desde config.json
   (brand.colors) y no se toca nada más de este archivo.

   Tema único y deliberado: fondo claro. Todos los colores se pintan de forma
   explícita para que la página no herede nada del entorno.
   ========================================================================== */

:root {

  /* --- 1. Los cinco ------------------------------------------------------ */
  /* Demo: Sample Roofing Co. Camionetas blancas, banda de capó gris pizarra,
     rotulación en naranja internacional — el color especificado para el Golden
     Gate porque aguanta niebla y salitre. */

  --fog:    #EDEEEA;   /* fondo de página. Gris pálido con sesgo verde.        */
  --chalk:  #FBFBF9;   /* plano elevado: ficha de contacto, formulario.        */
  --slate:  #2E3330;   /* tinta y campo oscuro. Gris verdoso, no negro teñido. */
  --zinc:   #8A8F88;   /* filetes, metadatos, pie de foto.                     */
  --orange: #BE3A17;   /* ÚNICO color de acción. Solo el botón de llamar.      */

  /* --- 2. Derivados ------------------------------------------------------ */

  --ink:            var(--slate);
  --ink-soft:       color-mix(in oklab, var(--slate) 70%, var(--fog));
  --ink-faint:      var(--zinc);

  --rule:           color-mix(in oklab, var(--zinc) 42%, var(--fog));
  --rule-strong:    var(--zinc);
  --rule-hair:      color-mix(in oklab, var(--zinc) 24%, var(--fog));

  --field:          var(--slate);              /* banda oscura                */
  --field-ink:      color-mix(in oklab, var(--fog) 94%, var(--slate));
  --field-ink-soft: color-mix(in oklab, var(--fog) 62%, var(--slate));
  --field-rule:     color-mix(in oklab, var(--fog) 26%, var(--slate));

  --action:         var(--orange);
  --action-hover:   color-mix(in oklab, var(--orange) 85%, var(--slate));
  --action-ink:     var(--chalk);              /* no un blanco literal: seria
                                                  un sexto valor de color     */

  --focus:          var(--slate);

  /* --- 3. Tipografía ----------------------------------------------------- */
  /* Dos familias. Zilla Slab: remates cuadrados, bajo contraste — lee sellado
     y permanente, y no grita como una condensada. Public Sans: dibujada para
     documentos públicos, altura de x grande, legible a oscuras en un teléfono.
     Prohibidas Inter y Montserrat. */

  --font-display: 'Zilla Slab', 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body:    'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --weight-body:      400;
  --weight-body-bold: 600;
  --weight-display:   600;

  /* Escala fluida. El cuerpo arranca en 17px: se lee de noche, con una mano. */
  --text-xs:      0.8125rem;                                  /* 13px         */
  --text-sm:      0.9375rem;                                  /* 15px         */
  --text-base:    clamp(1.0625rem, 0.25vw + 1rem, 1.125rem);  /* 17 → 18px    */
  --text-lg:      clamp(1.1875rem, 0.5vw + 1.06rem, 1.375rem);
  --text-xl:      clamp(1.375rem, 0.9vw + 1.15rem, 1.75rem);
  --text-2xl:     clamp(1.625rem, 1.6vw + 1.25rem, 2.25rem);
  --display-sm:   clamp(1.875rem, 2.4vw + 1.3rem, 2.875rem);
  --display:      clamp(2.375rem, 4.4vw + 1.1rem, 4.125rem);  /* frase lluvia */

  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-body:    1.55;

  --tracking-display: -0.015em;
  --tracking-body:     0;

  /* Medida por debajo de 80 caracteres, siempre.
     Ojo: `ch` es el ancho del cero, mas ancho que la letra minuscula media de
     Public Sans. 66ch daba 78 caracteres reales — pasaba raspando y no era lo
     que el token decia. 58ch da unos 68, que es donde se queria estar. */
  --measure:        58ch;
  --measure-narrow: 42ch;

  /* --- 4. Espacio -------------------------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.75rem;
  --space-8:  3.5rem;
  --space-9:  5rem;
  --space-10: 7rem;

  --section-y: clamp(3.5rem, 6vw, 6.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --measure-page: 1240px;

  /* --- 5. Forma ---------------------------------------------------------- */
  /* Un solo radio, y solo para controles. Los paneles van a canto vivo: el
     radio codifica "esto se pulsa", no decora. Nada de un mismo radio y una
     misma sombra bajo cada bloque. */

  --radius-control: 2px;
  --lift: 0 1px 2px color-mix(in oklab, var(--slate) 12%, transparent);

  --hairline: 1px;
  --rule-weight: 2px;

  /* --- 6. Movimiento ----------------------------------------------------- */
  /* Un único momento orquestado en toda la página: la línea de tiza del hero.
     El botón de llamar NO espera a que termine — se renderiza de inmediato. */

  --chalk-duration: 320ms;
  --ease-snap: cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-control: 120ms ease-out;

  /* --- 7. Retícula del hero ---------------------------------------------- */

  --hero-text-col: 38%;
  --callbar-height: 4.25rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --chalk-duration: 0ms;
    --transition-control: 0ms;
  }
}