/* ============================================================
   TOKENS — color, tipografía, espacio, radios, sombras, movimiento.
   Es el archivo que más se toca a mano. Un cambio acá impacta
   en todo el sitio.
   ============================================================ */

:root{
  color-scheme: light;

  /* ---------- Color — base ---------- */
  --cream:  #F7F6F1; /* fondo del sitio */
  --white:  #FFFFFF; /* panel, tarjetas */
  --navy:   #16263C; /* texto principal */
  --slate:  #5C6E88; /* texto secundario — ajustado de #6B7C94 para pasar AA (5.19:1 sobre blanco) */
  --muted:  #647084; /* metadatos, labels — ajustado de #9AA7B8 para pasar AA (5.01:1 sobre blanco) */
  --line:   #E8E5DC; /* bordes */
  --line-2: #EFEDE6; /* bordes suaves (tarjetas) */

  /* ---------- Color — etapas ----------
     Una etapa, un color. El color identifica la etapa, no decora.
     Los "-soft" son fondos; el texto sobre ellos va en "-ink".
     Nunca texto en el color base. */
  --purple:      #9B8AE6; /* Motion */
  --purple-soft: #EEEAFB;
  --purple-ink:  #6A55C4;

  --green:      #4FC08D; /* Desarrollo */
  --green-soft: #E3F6EC;
  --green-ink:  #1E7852; /* ajustado de #2E8C62 para pasar AA (4.83:1 sobre --green-soft) */

  --blue:      #5B9BE0; /* UX/UI */
  --blue-soft: #E2EDFB;
  --blue-ink:  #2868B2; /* ajustado de #2B6CB8 para pasar AA (4.77:1 sobre --blue-soft) */

  /* ---------- Tipografía ---------- */
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Escala fluida — para páginas con scroll (casos, sobre mí, 404).
     El mapa usa medidas fijas propias dentro de su stage escalado. */
  --fs-eyebrow: 11px;
  --fs-kicker:  13px;
  --fs-tiny:    clamp(.6875rem, .67rem + .08vw, .75rem);    /* ~11–12px */
  --fs-small:   clamp(.8125rem, .79rem + .1vw, .875rem);     /* ~13–14px */
  --fs-base:    clamp(.9375rem, .91rem + .15vw, 1rem);       /* ~15–16px */
  --fs-lead:    clamp(1.0625rem, 1rem + .25vw, 1.1875rem);   /* ~17–19px */
  --fs-h3:      clamp(1rem, .96rem + .25vw, 1.125rem);       /* ~16–18px */
  --fs-h2:      clamp(1.5rem, 1.3rem + 1vw, 2.0625rem);      /* ~24–33px */
  --fs-h1:      clamp(1.9rem, 1.5rem + 2.2vw, 2.75rem);      /* ~30–44px */

  --lh-title: 1.1;
  --lh-body:  1.65;
  --measure:  65ch;

  /* ---------- Espacio — escala 4/8 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---------- Radios ---------- */
  --radius:      12px;
  --radius-card: 13px;
  --radius-chip: 7px;

  /* ---------- Bordes y sombras ---------- */
  --border:     1px solid var(--line);
  --shadow-sm:  0 2px 10px #16263c08;
  --shadow-md:  0 8px 22px #16263c14;

  /* ---------- Movimiento ---------- */
  --ease:      cubic-bezier(.22,1,.36,1);
  --dur-fast:  180ms;
  --dur-base:  250ms;
  --dur-slow:  420ms;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}