/* ============================================================
   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, naranja quemado, 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:        #0f0c0a;   /* el negro del póster: nunca #000 puro */
  --noche-2:      #17120e;   /* superficies elevadas: tarjetas, barra lateral */
  --noche-3:      #221a14;   /* hover, código, filas alternas */

  /* El naranja y sus parientes */
  --naranja:      #e0592a;   /* acento: títulos, filetes, enlaces */
  --naranja-hondo:#b4441f;   /* panel macizo de las definiciones */
  --ambar:        #f09a3e;   /* brillo del planeta, énfasis secundario */

  /* Texto */
  --crema:        #f1e6d2;   /* cuerpo de texto */
  --crema-2:      #b8a992;   /* texto secundario */
  --crema-3:      #7d705f;   /* etiquetas apagadas, líneas */
  --tinta:        #140d08;   /* texto SOBRE naranja */

  /* El único azul: las notas de estudio (lo que no es del libro) */
  --azul:         #3a57a8;
  --azul-claro:   #8ea6ea;

  --linea:        rgba(224, 89, 42, .55);
  --linea-suave:  rgba(241, 230, 210, .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;
}