/* ============================================
   JG Reformas Madrid — Design Tokens
   Estética: minimalista frío de lujo (ref. estructura Modus) + acento dorado (JG)
   Archix Agency · Agente 03
   ============================================ */

@font-face {
  font-family: 'HK Grotesk Wide';
  src: url('../fonts/HKGroteskWide-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color: primitivos (blanco/gris frío) ---------- */
  --paper:      #F5F5F3;  /* off-white neutro */
  --paper-2:    #EAEAE7;  /* gris muy sutil, franjas */
  --card:       #FFFFFF;  /* tarjetas, crisp */
  --ink:        #17181A;  /* casi-negro frío — texto */
  --ink-2:      #45474C;  /* texto secundario */
  --gold:       #B0893C;  /* dorado — ACENTO ÚNICO (identidad JG) */
  --gold-deep:  #8A6A2A;
  --gold-soft:  #CDB37A;

  /* ---------- Color: semánticos ---------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-2);
  --bg-dark:      #17181A;
  --surface:      var(--card);
  --accent:       var(--gold);
  --accent-deep:  var(--gold-deep);
  --text:         var(--ink);
  --text-inverse: var(--paper);
  --text-muted:   color-mix(in srgb, currentColor 52%, transparent);
  --border:       color-mix(in srgb, currentColor 13%, transparent);

  /* ---------- Tipografía ---------- */
  --font-display: 'HK Grotesk Wide', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-hero:    clamp(2.3rem, 6.2vw, 5.25rem);  /* monumental (ajustado: fuente wide) */
  --text-h2:      clamp(1.7rem, 3.6vw, 3rem);
  --text-h3:      clamp(1.15rem, 1.8vw, 1.45rem);
  --text-lead:    clamp(1.35rem, 2.6vw, 2.15rem);  /* propuesta de valor */
  --text-body-lg: 1.18rem;
  --text-body:    1.02rem;
  --text-small:   0.875rem;
  --text-label:   0.75rem;

  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  --lh-heading: 1.02;
  --lh-body:    1.66;
  --tracking:   0.2em;

  /* ---------- Espaciado ---------- */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: clamp(6rem, 14vh, 11rem);

  /* ---------- Layout ---------- */
  --max-w:      min(1360px, calc(100vw - 3rem));
  --max-w-text: 60ch;
  --radius:     2px;
  --radius-lg:  12px;
  --gap:        1.25rem;

  /* ---------- Movimiento ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur:        260ms;
  --dur-reveal: 900ms;
}