/* ==========================================================================
   CODEX — Design tokens
   Fuente única de verdad. Ningún componente usa valores fuera de este archivo.

   Origen de cada valor:
   [framer]    extraído de la web publicada en Framer (octubre 2026)
   [propuesta] añadido para completar el sistema; no existía en Framer
   ========================================================================== */

:root {
  /* ---------- Color · primitivos ---------- */
  --codex-cream:      #fffefa;  /* [framer] fondo */
  --codex-cream-warm: #faf1cf;  /* [framer] definido, sin uso visible */
  --codex-ink:        #212121;  /* [framer] tinta principal (sustituye al #000 hardcodeado) */
  --codex-grey:       #4d4d4d;  /* [framer] texto de filtros */
  --codex-yellow:     #ffd970;  /* [framer] único acento: estados activos */

  /* ---------- Color · semánticos ---------- */
  --color-bg:             var(--codex-cream);
  --color-bg-subtle:      var(--codex-cream-warm);
  --color-bg-inverse:     var(--codex-ink);
  --color-bg-active:      #f4e0ac;  /* [propuesta] amarillo suave y opaco: estados activos */

  --color-text:           var(--codex-ink);
  --color-text-secondary: var(--codex-grey);
  --color-text-muted:     rgb(33 33 33 / 0.3);  /* [framer] @handles, metadatos */
  --color-text-ghost:     rgb(33 33 33 / 0.2);  /* [framer] títulos de sección (#d1d1cd sobre crema) */
  --color-text-inverse:   var(--codex-cream);

  --color-border: var(--codex-ink);
  --color-focus:  var(--codex-ink);

  /* ---------- Tipografía ----------
     Estructura por tallas: 2xs · xs · sm · md · lg · xl · display.
     Cada talla tiene tamaño, interlineado y tracking propios, y dos pesos:
       label     — 500, el estilo original de Framer: títulos, nav, etiquetas, datos
       paragraph — 400, un punto más ligero para texto corrido
     Nomenclatura: --text-<talla>, --leading-<talla>, --tracking-<talla> y
     --type-<talla>-<variante>. Las clases .t-* de base.css leen los --type-*. */

  --font-sans: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Pesos · primitivos. Fontshare: carga 400, 500 y 600 en la misma petición. */
  --font-weight-regular:  400;  /* [propuesta] */
  --font-weight-medium:   500;  /* [framer] peso por defecto de todo el sitio */
  --font-weight-semibold: 600;  /* [framer] */

  /* Pesos · semánticos */
  --font-weight-label:     var(--font-weight-medium);   /* [framer] */
  --font-weight-paragraph: var(--font-weight-regular);  /* [propuesta] */
  --font-weight-strong:    var(--font-weight-semibold); /* <strong> */

  /* Tallas. Múltiplos de la unidad de 12px que usaba Framer: dos series que se
     duplican (12 · 24 y 9 · 18 · 36) más el 15 de Framer. Cuanto más grande,
     interlineado más cerrado; por encima de 24px el tracking se cierra 0.01em
     por salto. En rem sobre 16px.
                                                                × 12px  */
  --text-2xs:     0.5625rem;  --leading-2xs:     1.4;   --tracking-2xs:     -0.04em;  /* ×0.75  9px [framer] */
  --text-xs:      0.75rem;    --leading-xs:      1.1;   --tracking-xs:      -0.03em;  /* ×1    12px [framer] */
  --text-sm:      0.9375rem;  --leading-sm:      1.2;   --tracking-sm:      -0.02em;  /* ×1.25 15px [framer] */
  --text-md:      1.125rem;   --leading-md:      1.1;   --tracking-md:      -0.03em;  /* ×1.5  18px [framer] */
  --text-lg:      1.5rem;     --leading-lg:      1.1;   --tracking-lg:      -0.03em;  /* ×2    24px [framer] */
  --text-xl:      clamp(1.5rem, 1rem + 1.6vw, 2.25rem);                               /* ×3    24 → 36px [propuesta] */
                              --leading-xl:      1.1;   --tracking-xl:      -0.04em;
  --text-display: clamp(3rem, 8vw, 7.5rem);                                           /* ×4–10 48 → 120px [propuesta] /lab */
                              --leading-display: 0.95;  --tracking-display: -0.05em;
  --tracking-caps: 0.05em; /* [propuesta] solo mayúsculas: nunca van apretadas */

  /* Estilos por talla: shorthand de `font` (peso tamaño/interlineado familia).
     El tracking va aparte: letter-spacing: var(--tracking-<talla>). */
  --type-2xs-label:         var(--font-weight-label)     var(--text-2xs)/var(--leading-2xs) var(--font-sans);
  --type-2xs-paragraph:     var(--font-weight-paragraph) var(--text-2xs)/var(--leading-2xs) var(--font-sans);
  --type-2xs-caption:       var(--font-weight-label)     var(--text-2xs)/var(--leading-xs)  var(--font-sans); /* versales */
  --type-xs-label:          var(--font-weight-label)     var(--text-xs)/var(--leading-xs)   var(--font-sans);
  --type-xs-paragraph:      var(--font-weight-paragraph) var(--text-xs)/var(--leading-xs)   var(--font-sans);
  --type-sm-label:          var(--font-weight-label)     var(--text-sm)/var(--leading-sm)   var(--font-sans);
  --type-sm-paragraph:      var(--font-weight-paragraph) var(--text-sm)/var(--leading-sm)   var(--font-sans);
  --type-md-label:          var(--font-weight-label)     var(--text-md)/var(--leading-md)   var(--font-sans);
  --type-md-paragraph:      var(--font-weight-paragraph) var(--text-md)/var(--leading-md)   var(--font-sans);
  --type-lg-label:          var(--font-weight-label)     var(--text-lg)/var(--leading-lg)   var(--font-sans);
  --type-lg-paragraph:      var(--font-weight-paragraph) var(--text-lg)/var(--leading-lg)   var(--font-sans);
  --type-xl-label:          var(--font-weight-label)     var(--text-xl)/var(--leading-xl)   var(--font-sans);
  --type-xl-paragraph:      var(--font-weight-paragraph) var(--text-xl)/var(--leading-xl)   var(--font-sans);
  --type-display-label:     var(--font-weight-label)     var(--text-display)/var(--leading-display) var(--font-sans);
  --type-display-paragraph: var(--font-weight-paragraph) var(--text-display)/var(--leading-display) var(--font-sans);

  /* Ritmo de lectura */
  --leading-prose:    1.5;    /* [propuesta] texto largo de .prose */
  --measure:          60ch;   /* [propuesta] ancho máximo de lectura */
  --measure-wide:     80ch;   /* [propuesta] textos cortos de 9px, como la intro del hero */
  --prose-flow:       1em;    /* [propuesta] separación entre párrafos */
  --prose-flow-list:  0.25em; /* [propuesta] separación entre elementos de lista */
  --underline-offset: 0.15em; /* [propuesta] enlaces dentro de texto */

  /* ---------- Espaciado (base 4px) ---------- */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px  margen de página [framer] */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px  gutter [framer] */
  --space-6:  1.5rem;   /*  24px */
  --space-8:  2rem;     /*  32px */
  --space-12: 3rem;     /*  48px */
  --space-16: 4rem;     /*  64px */
  --space-24: 6rem;     /*  96px */
  --space-32: 8rem;     /* 128px  separación entre bloques de la home [framer ≈132px] */

  /* ---------- Layout ---------- */
  --page-margin:     var(--space-2);  /* [framer] 8px en about, archive y project */
  --grid-columns:    12;              /* [propuesta] retícula común a todas las páginas */
  --grid-gutter:     var(--space-4);  /* [framer] 16px entre columnas en about */
  --page-max-narrow: 75rem;           /* 1200px [framer] solo en la home → decisión pendiente */
  /* Breakpoints [framer]: móvil < 1200px ≤ desktop < 1920px ≤ wide.
     Las custom properties no funcionan dentro de @media: escribe los valores literales. */

  /* ---------- Bordes y superficies ---------- */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border); /* [framer] cajas, nav, tarjetas */
  --radius: 0; /* [framer] ninguna esquina redondeada. Regla del sistema. */
  /* Sin sombras. Regla del sistema. */

  /* ---------- Imagen ---------- */
  --reveal-rest-opacity:   0.2;  /* [framer] imagen "lavada" en reposo */
  --reveal-active-opacity: 1;

  /* ---------- Motion ----------
     Todo es ease out: el cambio ocurre casi entero al principio y se posa
     despacio. Por eso las duraciones pueden ser largas sin sentirse lentas.
     Nada arranca de golpe ni frena en seco. */

  /* Curvas · primitivos (de más suave a más marcada) */
  --ease-out:       cubic-bezier(0.12, 0.23, 0.5, 1); /* [framer] la más suave: fundidos de opacidad y color */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* [propuesta] desplazamientos y escalas */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);    /* [propuesta] solo /lab y el momento cinema */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);   /* [propuesta] única excepción: transición entre páginas */

  /* Curvas · semánticas: los componentes usan estas */
  --ease-fade: var(--ease-out);       /* opacity, color, background-color */
  --ease-move: var(--ease-out-quart); /* transform, clip-path, apertura del acordeón */
  --ease-page: var(--ease-in-out);    /* View Transitions entre páginas */

  /* Duraciones. Más largas que en Framer: con ease out la cola se alarga y suaviza. */
  --duration-instant: 150ms;  /* [propuesta] feedback de pulsación */
  --duration-fast:    300ms;  /* [propuesta, framer 200ms] hover de color */
  --duration-base:    500ms;  /* [propuesta, framer ≈300ms] revelado de imagen y etiqueta */
  --duration-slow:    800ms;  /* [propuesta] acordeón, escalas de imagen */
  --duration-slower:  1100ms; /* [propuesta] transiciones de página */
  --duration-cinema:  1600ms; /* [propuesta] momentos únicos: intro, hero */

  /* Amplitud. Suave también es moverse poco. */
  --motion-nudge: 2px;      /* [propuesta] flecha ↗ de las tarjetas de enlace */
  --motion-rise:  0.25rem;  /* [propuesta] 4px: lo que sube una etiqueta al aparecer */
  --motion-zoom:  1.02;     /* [propuesta, antes 1.03] escala de imagen al hover */

  --stagger:      60ms; /* [propuesta, antes 40ms] retardo entre elementos de una lista */
  --ticker-speed: 90s;  /* [framer ≈] vuelta completa del ticker: deriva muy lenta */
}

/* En móvil los textos de 9px suben a 12px [framer: preset hyxwm0] */
@media (max-width: 1199.98px) {
  :root {
    --type-2xs-label:     var(--font-weight-label)     var(--text-xs)/var(--leading-2xs) var(--font-sans);
    --type-2xs-paragraph: var(--font-weight-paragraph) var(--text-xs)/var(--leading-2xs) var(--font-sans);
    --type-2xs-caption:   var(--font-weight-label)     var(--text-xs)/var(--leading-xs)  var(--font-sans);
  }
}

/* Movimiento reducido: el sistema entero se aplana desde aquí. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
    --duration-cinema:  0ms;
    --stagger:          0ms;
  }
}

/* [propuesta] Modo oscuro opcional, solo con data-theme="dark" en <html>.
   No se activa por preferencia del sistema: la marca vive sobre crema.
   El amarillo se mantiene; la tinta pasa a crema y el fondo a un negro cálido. */
[data-theme="dark"] {
  --color-bg:             #1a1916;
  --color-bg-subtle:      #26241f;
  --color-bg-inverse:     var(--codex-cream);
  --color-text:           #f2f0e8;
  --color-text-secondary: #b3b0a6;
  --color-text-muted:     rgb(242 240 232 / 0.35);
  --color-text-ghost:     rgb(242 240 232 / 0.22);
  --color-text-inverse:   var(--codex-ink);
  --color-border:         #f2f0e8;
  --color-focus:          var(--codex-yellow);
}