/* ============================================================
   tokens.css — la paleta y la tipografía, en un solo sitio

   Sale de dos pósters de ciencia ficción retro: fondo casi negro con
   grano, violeta profundo, crema, y un único azul (la mancha térmica del
   primero). Cada color tiene UN papel; si hace falta un papel nuevo, se
   discute aquí antes de inventar un hex suelto en otra hoja.
   ============================================================ */

@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../vendor/fuentes/righteous.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../vendor/fuentes/space-grotesk.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../vendor/fuentes/space-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../vendor/fuentes/space-mono-700.woff2) format('woff2');
}

:root {
  /* Fondos */
  --noche:        #0d0a0f;   /* el negro del póster: nunca #000 puro */
  --noche-2:      #130e17;   /* superficies elevadas: tarjetas, barra lateral */
  --noche-3:      #1c1422;   /* hover, código, filas alternas */

  /* El violeta y sus parientes */
  --violeta:      #9d6cf0;   /* acento: títulos, filetes, enlaces */
  --violeta-hondo:#6a3fc4;   /* panel macizo de las definiciones */
  --lavanda:      #cdb0ff;   /* brillo del planeta, énfasis secundario */

  /* Texto */
  --crema:        #eee8f8;   /* cuerpo de texto */
  --crema-2:      #b3aac6;   /* texto secundario */
  --crema-3:      #766d8a;   /* etiquetas apagadas, líneas */
  --tinta:        #0f0814;   /* texto SOBRE violeta */

  /* El único azul: las notas de estudio (lo que no es del libro) */
  --azul:         #2b7ea8;
  --azul-claro:   #86c6e8;

  /* El único cálido: lo que FALLA (un contraejemplo, una curva no rectificable,
     un error que no se va). Solo lo usan las figuras de js/viz/. */
  --alerta:       #ff8fae;

  --linea:        rgba(157, 108, 240, .55);
  --linea-suave:  rgba(238, 232, 248, .12);

  /* Tipografía */
  --f-display: 'Righteous', 'Space Grotesk', system-ui, sans-serif;
  --f-texto:   'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --track-etq: .22em;        /* el tracking ancho de las etiquetas del póster */

  /* Medidas */
  --hud-alto: 58px;
  --lateral-ancho: 292px;
  --lectura: 760px;          /* ancho de columna de lectura */
  --filete: 1.5px;
}