/* ------------------------------------------------------------------
   Sistema visual — Grupo Tensa
   Concepto: el cartón bajo presión.
   La paleta nace del material: papel, tinta, kraft. El verde es la
   marca (FSC, sostenibilidad); el naranja señal es el instrumento de
   medición, y por eso aparece solo donde hay un dato medido.
   ------------------------------------------------------------------ */

:root {
    /* --- Color: material --- */
    --ink:          #14110E;   /* tinta, negro cálido */
    --ink-2:        #211B15;   /* superficie oscura elevada */
    --ink-3:        #322A21;   /* bordes sobre oscuro */
    --paper:        #F4EFE6;   /* papel base */
    --paper-2:      #EAE2D4;   /* papel, superficie */
    --paper-3:      #DBCFBB;   /* papel, borde */

    --kraft:        #C08A4E;   /* cartón */
    --kraft-deep:   #8A5A2B;
    --kraft-pale:   #E3C9A6;

    /* --- Color: marca --- */
    --pine:         #14563A;   /* verde Tensa, profundizado */
    --pine-bright:  #1E7A4F;
    --pine-pale:    #BFD9C9;

    /* --- Color: instrumento --- */
    --signal:       #E2542B;   /* solo para medición y acción */
    --signal-soft:  #F0855F;

    /* El naranja vivo solo alcanza 3.3:1 sobre papel, insuficiente para
       texto pequeño. Sobre fondo claro el texto usa esta versión oscurecida
       (5.1:1); sobre tinta el vivo ya cumple y se reasigna más abajo. */
    --signal-text:  #B33C15;

    /* --- Roles semánticos (modo claro por defecto) --- */
    --bg:            var(--paper);
    --bg-raised:     var(--paper-2);
    --fg:            var(--ink);
    --fg-muted:      #6B6155;
    --rule:          var(--paper-3);

    /* --- Tipografía --- */
    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Consolas', monospace;

    /* Escala fluida. Los titulares son monumentales a propósito: el
       contraste de escala es lo que separa una página con voz de una
       plantilla donde todo mide casi lo mismo. */
    /* El mínimo baja hasta 2.75rem porque a 375 px «MEDIMOS» en Archivo 800
       no cabe en una línea por encima de eso, y partir una palabra del
       titular arruina tanto la composición como el revelado por líneas. */
    --fs-mega:   clamp(2.75rem, 11.5vw, 12rem);
    --fs-xxl:    clamp(2.75rem, 7.5vw, 6.5rem);
    --fs-xl:     clamp(2.125rem, 4.6vw, 4rem);
    --fs-l:      clamp(1.5rem, 2.4vw, 2.25rem);
    --fs-m:      clamp(1.125rem, 1.5vw, 1.5rem);
    --fs-body:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-small:  0.9375rem;
    --fs-label:  0.75rem;

    --lh-tight:  0.92;
    --lh-snug:   1.08;
    --lh-normal: 1.35;
    --lh-loose:  1.65;

    --tr-display: -0.035em;   /* tracking negativo en titulares grandes */
    --tr-label:    0.16em;    /* tracking abierto en etiquetas mono */

    /* --- Espacio y grid --- */
    --grid-max:  1560px;
    --measure:   64ch;
    --gutter:    clamp(1.25rem, 5vw, 5rem);

    --space-3xs: 0.375rem;
    --space-2xs: 0.625rem;
    --space-xs:  clamp(0.75rem, 1.2vw, 1rem);
    --space-s:   clamp(1rem, 2vw, 1.75rem);
    --space-m:   clamp(2rem, 4vw, 3.5rem);
    --space-l:   clamp(3.5rem, 7vw, 6.5rem);
    --space-xl:  clamp(5rem, 11vw, 10rem);
    --space-2xl: clamp(7rem, 15vw, 14rem);

    /* --- Motion --- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:  180ms;
    --dur-base:  380ms;
    --dur-slow:  760ms;
    --dur-story: 1200ms;

    /* --- Capas --- */
    --z-base:   1;
    --z-raised: 10;
    --z-nav:    100;
    --z-overlay:200;
}

/* Secciones sobre tinta: el laboratorio, el hero, la estiba.
   Invertir los roles en un solo sitio evita repetir colores por todo el CSS. */
.on-ink {
    --bg:        var(--ink);
    --bg-raised: var(--ink-2);
    --fg:        var(--paper);
    --fg-muted:  #9A8F80;
    --rule:      var(--ink-3);
    --signal-text: var(--signal);

    background: var(--bg);
    color: var(--fg);
}

.on-pine {
    --bg:        var(--pine);
    --bg-raised: #10462F;
    --fg:        var(--paper);
    --fg-muted:  var(--pine-pale);
    --rule:      #1E6B47;
    --signal-text: var(--signal-soft);

    background: var(--bg);
    color: var(--fg);
}