:root {
  /* =========================================================
     FAMILIAS TIPOGRÁFICAS
     ========================================================= */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* =========================================================
     ESCALA TIPOGRÁFICA — Major Third (1.25)
     ========================================================= */
  --fs-0:   11px;   /* micro: footer fineprint */
  --fs-1:   12px;   /* subtitles uppercase */
  --fs-2:   13px;   /* nav, captions, footer rows */
  --fs-3:   15px;   /* body */
  --fs-4:   18px;   /* about tagline */
  --fs-5:   22px;   /* project title tablet */
  --fs-6:   28px;   /* project title default */
  --fs-7:   36px;   /* about headline */
  --fs-8:   48px;   /* hero tablet */
  --fs-9:   64px;   /* hero desktop */

  /* =========================================================
     LINE HEIGHTS
     ========================================================= */
  --lh-tight:  1.05;   /* hero, display grandes */
  --lh-snug:   1.2;    /* títulos medianos */
  --lh-base:   1.45;   /* body por defecto */
  --lh-loose:  1.65;   /* about body, lecturas largas */

  /* =========================================================
     LETTER SPACING
     ========================================================= */
  --ls-display: -0.025em;  /* Fraunces grande */
  --ls-tight:   -0.01em;   /* Fraunces mediano */
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.15em;    /* uppercase microtype */
  --ls-uber:    0.22em;    /* footer label */

  /* =========================================================
     PESOS
     ========================================================= */
  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;

  /* =========================================================
     COLORES
     ========================================================= */
  --bg:          #F5F4F0;   /* crema (mantener) */
  --dark:        #1A1A18;   /* casi-negro cálido (mantener) */
  --mid:         #4F4E4A;   /* gris refinado — pasa AAA sobre --bg */
  --accent:      #A89070;   /* beige cálido — SOLO decoración */
  --accent-text: #7A6450;   /* beige oscuro — para subtitles/labels (AA sobre --bg) */
  --hero-bg:     #1A1916;   /* fondo hero antes del render */
  --hairline:    #E8E6E0;   /* divisores sutiles */

  /* =========================================================
     ESPACIADO — Base 4px
     ========================================================= */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;
  --space-11: 160px;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --nav-h:          64px;
  --max-w:          1440px;   /* era 1200, actualizado para monitores modernos */
  --gutter:         76px;
  --gutter-mobile:  16px;
  --gap:            15px;     /* gap entre imágenes en grids */

  /* =========================================================
     BREAKPOINTS (referencia — usar en @media manualmente)
     ========================================================= */
  --bp-mobile:  768px;
  --bp-tablet:  1024px;
  --bp-desktop: 1440px;
}