/* ============================================================
   tokens.css — design system
   Todas las variables del sitio. El tema cambia estos valores.
   ============================================================ */

:root {
  /* Tipografía */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Base tomada de ignacio.info (h1 24px/500, body 14px/400), un escalón
     más pequeño en el cuerpo y los enlaces de contacto/menú a petición. */
  --fs-h1: 1.5rem;      /* 24px — "Ignacio Manzano" */
  --fs-body: 0.8125rem; /* 13px — párrafos */
  --fs-ui: 0.75rem;     /* 12px — enlaces de contacto y menú */

  --lh-body: 1.4;

  /* Timeline: un punto por debajo del cuerpo del hero */
  --fs-tl: 0.75rem;      /* 12px — título, subtítulo y ubicación */
  --fs-date: 0.625rem;   /* 10px — fecha (2 puntos menos) */
  --fs-updated: 0.5rem;  /* 8px — "Updated July 2026" */

  --fw-regular: 400;
  --fw-medium: 500;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;

  /* Layout */
  --col-width: 460px;
  --ascii-width: 190px;

  /* Timeline: la rejilla es mucho más ancha que la columna del hero.
     Las dos columnas de tarjetas quedan centradas en la página porque
     el hueco de los años y el sobrante de la derecha son ambos 1fr. */
  --tl-max: 1500px;
  --tl-pad: 40px;
  --tl-left: 430px;
  --tl-right: 560px;
  --tl-col-gap: 110px;
  --tl-stack-gap: 16px;
  --tl-radius: 14px;
  /* A qué altura del viewport se queda "clavado" el texto de una burbuja
     mientras su contenedor sigue bajando (efecto sticky del timeline). */
  --tl-sticky-top: 120px;

  /* Alturas por año. Los primeros son más altos porque tienen más
     contenido; de 2021 hacia atrás todos usan la altura base. */
  --h-year: 215px;
  --h-2026: 740px;
  --h-2025: 345px;
  --h-2024: 315px;
  --h-2023: 220px;
  --h-2022: 220px;

  /* Transiciones */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- LIGHT ---------- */
:root,
[data-theme="light"] {
  --bg: #f5f5f5;
  --text-strong: #131313;
  --text-body: #413f3f;
  --text-muted: #8b867e;

  --toggle: #131313;

  --surface: #fafafa;            /* fondo de menú y popovers */
  --surface-border: rgba(19, 19, 19, 0.06);
  --surface-shadow: 0 1px 2px rgba(19, 19, 19, 0.04), 0 8px 24px rgba(19, 19, 19, 0.08);

  --wave-from: #6e6961;
  --wave-to: #161616;

  /* Timeline */
  --tl-rule: #e1e1e1;
  --tl-year: #b2b2b2;
  --tl-title: #0d0d0d;
  --tl-subtitle: #818181;
  --tl-place: #b7b7b7;
  --tl-date: #8a867f;
  --tl-chevron: #d2d2d2;
  --pill-info: #818181;

  /* Ligeramente translúcidas para que se note el desenfoque del fondo */
  --bubble-bg: rgba(250, 250, 250, 0.82);
  --bubble-border: #efefef;
  --bubble-bg-muted: rgba(235, 235, 235, 0.82);
  --bubble-border-muted: #efefef;

  /* Normaliza cualquier logo al color exacto pedido, venga en el
     tono que venga: brightness(0) lo lleva a negro, invert() lo sube. */
  --logo-filter: brightness(0) invert(0.051); /* #0d0d0d */

  --footer-text: #8b867e;
  --footer-updated: #bcb9b5;

  /* Logos monocromos del popover "Ask AI" */
  --ai-logo: #413f3f;

  /* Artículos */
  --accent: #3047b6;          /* categoría del artículo (EDITORIAL, ARTICLE…) */
  --art-col: 520px;           /* columna de texto (472px + 24px de aire) */
  --art-hero: 736px;          /* imagen de cabecera, más ancha que el texto */
  --signature: #8c8a84;

  /* Liquid glass de los modales: muy translúcido para que el desenfoque
     del fondo se note al máximo. */
  --glass-bg: rgba(238, 238, 238, 0.45);
  --glass-border: rgba(255, 255, 255, 0.55);
  --modal-scrim: rgba(245, 245, 245, 0.28);
}

/* ---------- DARK ----------
   PROVISIONAL: solo --bg y --toggle están confirmados.
   --bg #080808 viene del fondo con el que se generaron los frames ASCII oscuros.
   El resto son inversos calculados a la espera de la paleta definitiva. */
[data-theme="dark"] {
  --bg: #080808;
  --text-strong: #fafafa;
  --text-body: #c4c0bb;
  --text-muted: #8b867e;

  --toggle: #fafafa;

  --surface: #161616;
  --surface-border: rgba(250, 250, 250, 0.08);
  --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);

  --wave-from: #6e6961;
  --wave-to: #fafafa;

  /* Timeline */
  --tl-rule: #1f1f1f;
  --tl-year: #525252;
  --tl-title: #fafafa;
  --tl-subtitle: #838383;
  --tl-place: #535353;
  --tl-date: #505050;
  --tl-chevron: #2e2c2c;
  --pill-info: #535353;

  --bubble-bg: rgba(13, 13, 13, 0.82);
  --bubble-border: #0F0F0F;
  --bubble-bg-muted: rgba(20, 20, 20, 0.82);
  --bubble-border-muted: #131212;

  --logo-filter: brightness(0) invert(0.98); /* #fafafa */

  --ai-logo: #f5f4f1;

  /* En oscuro el azul se aclara para que siga leyéndose sobre #080808 */
  --accent: #7d92f0;
  --signature: #8c8a84;

  --footer-text: #8b867e;
  --footer-updated: #bcb9b5;

  --glass-bg: rgba(18, 18, 18, 0.42);
  --glass-border: rgba(255, 255, 255, 0.10);
  --modal-scrim: rgba(0, 0, 0, 0.32);
}