/* ============================================
   Design tokens — fuente única de verdad
   Portafolio Mar Isaza — 2026
   ============================================ */

:root {
  /* -------- Paleta -------- */
  --color-bg:            #131311; /* Fondo base — negro cálido */
  --color-bg-elevated:   #1A1A17; /* Fondo de cards/elevated surfaces */
  --color-text:          #E9E9E3; /* Texto principal — crema */
  --color-text-muted:    #9A9A90; /* Captions, metadata */
  --color-border:        #4E4E48; /* Bordes sutiles, dividers */
  --color-accent:        #CCDB3A; /* Yellow-green — links, hovers, CTA */
  --color-accent-dim:    rgba(204, 219, 58, 0.6);

  /* -------- Tipografía -------- */
  --font-display:  'Bebas Neue', sans-serif;    /* Headlines medianos */
  --font-black:    'Archivo Black', sans-serif; /* Hero, cifras grandes */
  --font-body:     'Archivo', sans-serif;       /* Texto corrido, UI */
  --font-mono:     'DM Mono', monospace;        /* Metadata, tags, fechas */
  --font-ornament: 'Instrument Serif', serif;   /* Playful serif accents */

  /* Escala tipográfica (fluida) — reducida 40% (Mar 2026-10-28) */
  /* Reduced another ~4pt step across the board */
  --fs-hero:       clamp(1rem, 2.5vw, 2.6rem);      /* 16–42 px */
  --fs-section:    clamp(0.85rem, 1.8vw, 1.75rem);  /* 14–28 px */
  --fs-case:       clamp(0.78rem, 1.15vw, 1.15rem); /* 12–18 px */
  --fs-body:       clamp(0.6rem, 0.68vw, 0.68rem);  /* 10–11 px */
  --fs-caption:    0.5rem;                          /* 8 px */
  --fs-tag:        0.44rem;                         /* 7 px */

  /* Line-heights */
  --lh-tight:      1.05;
  --lh-normal:     1.5;
  --lh-loose:      1.7;

  /* -------- Espaciado (grid de 8) -------- */
  --space-1:       0.25rem;  /* 4 */
  --space-2:       0.5rem;   /* 8 */
  --space-3:       1rem;     /* 16 */
  --space-4:       1.5rem;   /* 24 */
  --space-5:       2rem;     /* 32 */
  --space-6:       3rem;     /* 48 */
  --space-7:       4rem;     /* 64 */
  --space-8:       6rem;     /* 96 */
  --space-9:       8rem;     /* 128 */
  --space-10:      12rem;    /* 192 */

  /* -------- Layout -------- */
  --max-content:   1440px;
  --gutter-desktop: var(--space-7); /* 64 px */
  --gutter-mobile:  var(--space-4); /* 24 px */

  /* -------- Transiciones -------- */
  --t-fast:        180ms ease-out;
  --t-base:        300ms ease-out;
  --t-slow:        600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* -------- Z-index scale -------- */
  --z-nav:         100;
  --z-overlay:     200;
  --z-modal:       300;
}

/* Opcional: enforce light mode even if OS is dark (we are already dark) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0ms;
    --t-base:  0ms;
    --t-slow:  0ms;
  }
}