/* =====================================================================
   ZAALAS MUEBLES — Design Tokens
   Fuente de verdad de marca, derivada del Manual de Identidad (Ed. 2026).
   Única fuente de verdad para color y tipografía del tema "inlab".
   Encolar ESTE archivo primero, antes que cualquier otro CSS.
   ===================================================================== */

:root{
  /* === Color marca (del manual) === */
  --inlab-red:        #2d3b32;  /* acento / CTA — máxima jerarquía */
  --inlab-black:      #2d3b32;  /* texto principal */
  --inlab-gray:       #878f88;  /* texto secundario */
  --inlab-gray-light: #F1F1EC;  /* fondos suaves / tarjetas */
  --inlab-white:      #FFFFFE;  /* fondo dominante */

  /* Derivados (NO están en el manual; se agregan para estados de UI) */
  --inlab-red-hover:  #F1F1EC;  /* hover/pressed de botones rojos */

  /* === Roles semánticos (usar ESTOS en el CSS, no los HEX directos) === */
  --color-bg:           #F6F6F6;
  --color-surface:      var(--inlab-gray-light);
  --color-text:         var(--inlab-black);
  --color-text-muted:   var(--inlab-gray);
  --color-accent:       var(--inlab-red);
  --color-accent-hover: var(--inlab-red-hover);
  --color-on-accent:    var(--inlab-white);

  /* === Tipografía (Google Fonts, gratuitas) === */
  --font-head:"Poppins", system-ui, sans-serif;   /* titulares */
  --font-body:"Lato", system-ui, sans-serif;       /* texto */
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Escala web responsiva (pt del manual ≠ px web; body web mínimo 16px) */
  --fs-h1:clamp(1.75rem, 4vw, 2.5rem);   /* ~28–40px */
  --fs-h2:clamp(1.125rem, 2vw, 1.5rem);  /* ~18–24px */
  --fs-body:1rem;                         /* 16px, legibilidad web */
  --fs-small:0.875rem;

  /* === Forma y espacio === */
  --radius:10px;            /* esquinas del sistema gráfico (r≈10) */
  --bar-accent:4px;         /* grosor de la barra roja vertical */
  --space-section:clamp(3rem, 8vw, 6rem);
}