/* Quieren Data? — tokens.css, generado desde tokens.json. No editar a mano: cambiá tokens.json. */

@font-face { font-family: 'Anton'; src: url('fonts/Anton-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

:root, [data-theme="light"] {
  --surface: #fcf9ef; /* Fondo principal de página: crema en modo claro, negro con violeta en modo oscuro. Los acen */
  --surface-card: #ffffff; /* Tarjeta blanca del newsletter dentro del marco verde (`brand`). En oscuro coincide con `su */
  --ink: #000000; /* Titulares en Anton, wordmark y cifras grandes; sobre `surface` y `surface-card` (21:1 clar */
  --text-body: #515856; /* Texto de cuerpo en Space Mono sobre `surface` (6.9:1) y `surface-card` (7.3:1). En oscuro  */
  --line: #eaeced; /* Filete de 1px que separa secciones del newsletter (muestreado de la edición N°3). Decorati */
  --brand: #20c997; /* Verde azulado de marca: color ancla. Marco del newsletter, fondo del isotipo QD?, bloques  */
  --on-brand: #000000; /* Texto e isotipo sobre `brand` (9.9:1). Nunca blanco sobre verde (2.1:1). */
  --accent-cyan: #28d7ff; /* Acento de collage: triángulos de esquina, burbujas chicas. Solo como relleno, nunca como t */
  --accent-orange: #ff7f3e; /* Acento de collage: el círculo grande detrás del busto, burbujas y barras. Solo relleno. */
  --accent-dark-green: #198754; /* Acento de collage (burbuja 'Felicidad'). Es el único verde que pasa 4.5:1 como texto sobre */
  --accent-purple: #7f39f2; /* Acento de collage: burbujas y la barra más alta. El texto chico encima va en `on-purple` ( */
  --accent-red: #e93748; /* Acento de collage (burbuja 'Fiesta'). No significa error: en esta marca es una ficha más. */
  --accent-yellow: #ffc107; /* Acento de collage: burbujas y barras. Solo relleno. */
  --accent-pink: #fd3a69; /* Acento de collage: el chicle del busto, burbuja 'Amor', barra 2021. Solo relleno. */
  --accent-blue: #0074d9; /* Acento de collage (Azul vibrante): el parche del brazo del busto. Solo relleno. */
  --on-accent: #000000; /* Texto sobre cualquier acento salvo púrpura: ≥4.5:1 en todos (azul justo 4.5:1). */
  --on-purple: #ffffff; /* Texto sobre `accent-purple` (5.6:1). Las piezas originales usan negro; con negro solo pasa */
  --link: var(--brand); /* Links del newsletter, subrayados en verde de marca. Tal como en la fuente: 2.1:1 sobre bla */
  --link-strong: #198754; /* Links dentro de texto largo en el sitio: verde oscuro sobre blanco (4.5:1) y verde de marc */
  --halftone-dot: rgba(255, 255, 255, 0.28); /* Puntos de la trama de semitono dibujada sobre formas de color (burbujas, bloques). */
  --focus-ring: var(--ink); /* Anillo de foco de 2px sólido: negro sobre crema, crema sobre negro violeta (≥16:1). */
}

[data-theme="dark"] {
  --surface: #1a1a2e;
  --surface-card: #1a1a2e;
  --ink: #fcf9ef;
  --text-body: #fcf9ef;
  --line: rgba(252, 249, 239, 0.16);
  --brand: #20c997;
  --link-strong: #20c997;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --radius-sm: 4px;
  --radius-block: 16px;
  --radius-full: 9999px;
  --font-display: Anton, "Arial Narrow", Impact, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
}

.display-poster { font-family: var(--font-display); font-size: 96px; line-height: 0.92; font-weight: 400; }
.display-h1 { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 400; }
.display-h2 { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 400; }
.data-figure { font-family: var(--font-mono); font-size: 40px; line-height: 1; font-weight: 700; }
.data-label { font-family: var(--font-mono); font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: 0.02em; }
.kicker { font-family: var(--font-mono); font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; }
.body { font-family: var(--font-mono); font-size: 15px; line-height: 1.85; font-weight: 400; }
.body-strong { font-family: var(--font-mono); font-size: 15px; line-height: 1.6; font-weight: 700; }
.body-italic { font-family: var(--font-mono); font-size: 15px; line-height: 1.85; font-weight: 400; font-style: italic; }
.meta { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; font-weight: 400; }