/* ============================================
   ReformTechVillalba — Design Tokens
   Agente 03 · Etapa 1 · 2026-06-11
   Paleta: marrón / negro / blanco — premium sutil
   Referencia: modusprojects.nl (adaptada a local-residencial)
   ============================================ */

:root {
  /* ---------- Primitivos: color ---------- */
  --white:        #FAF8F5;  /* blanco cálido, nunca #fff puro */
  --black:        #181512;  /* negro cálido, nunca #000 puro */
  --brown-700:    #6B5138;  /* marrón profundo — hovers, texto sobre claro */
  --brown-500:    #8C6B4F;  /* marrón tabaco — ACENTO PRINCIPAL */
  --brown-300:    #C2A98D;  /* marrón arena — detalles sobre oscuro */
  --grey-warm:    #E9E3DA;  /* superficie clara cálida (cards, franjas) */
  --grey-mid:     #8F8579;  /* gris topo — bordes, texto terciario */

  /* ---------- Semánticos: color ---------- */
  --color-bg:           var(--white);
  --color-bg-dark:      var(--black);
  --color-surface:      var(--grey-warm);
  --color-accent:       var(--brown-500);
  --color-accent-deep:  var(--brown-700);
  --color-accent-soft:  var(--brown-300);
  --color-text:         var(--black);
  --color-text-inverse: var(--white);
  /* secundario: técnica Modus — del color actual, no un gris nuevo */
  --color-text-muted:   color-mix(in srgb, currentColor 65%, transparent);
  --color-border:       color-mix(in srgb, currentColor 18%, transparent);

  /* ---------- Tipografía ---------- */
  --font-display: 'Onoma', Georgia, serif;            /* un solo peso: jerarquía por tamaño */
  --font-body:    'Source Sans 3', Arial, sans-serif; /* variable 200–900 */

  --text-hero:    clamp(1.95rem, 6.5vw, 5.5rem); /* H1 — mínimo seguro en 360-390px */
  --text-h2:      clamp(1.65rem, 4.5vw, 3.5rem);
  --text-h3:      clamp(1.2rem, 2vw, 1.5rem);
  --text-quote:   clamp(1.5rem, 4vw, 3rem);      /* frase de marca */
  --text-body-lg: 1.2rem;
  --text-body:    1.05rem;
  --text-small:   0.85rem;
  --text-label:   0.78rem;                        /* eyebrows / etiquetas */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;   /* máximo — nunca bold gritón */

  --leading-heading: 1.08;
  --leading-body:    1.7;
  --tracking-label:  0.14em; /* solo etiquetas uppercase */

  /* ---------- Espaciado ---------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: clamp(5rem, 12vh, 9rem);  /* respiración entre secciones */

  /* ---------- Layout ---------- */
  --max-w:         min(1400px, calc(100vw - 3rem));
  --max-w-text:    65ch;
  --border-radius: 2px;       /* casi recto — premium, no burbuja */
  --gap:           1.25rem;

  /* ---------- Movimiento ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* entradas */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* slider / máscaras */
  --dur-ui:     250ms;                             /* micro-interacciones */
  --dur-reveal: 900ms;                             /* reveals de scroll */
}