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

   La piel de la serie (integracion-i2 en naranja, integracion-i3 en
   violeta): un póster de ciencia ficción retro. Fondo casi negro con
   estrellas y grano, texto crema, un acento, y un único azul. Esta lleva
   VERDE. Lo que es del apunte del profesor va en crema; lo que añadimos
   nosotros —notas de estudio, figuras, desarrollos— en AZUL. Lo que falla
   (una errata, un contraejemplo) en rosa de alerta.

   Cada color tiene UN papel; si hace falta uno nuevo, se discute aquí antes
   de inventar un hex suelto en otra hoja. Contrastes (WCAG) sobre el fondo:
   todo color de TEXTO pasa 4,5:1 en los dos temas.

   El tema: oscuro siempre, como las otras dos páginas; el botón ☼ de la
   cabecera fija html[data-tema="dia"] —una versión clara, la misma tinta
   sobre papel— hasta recargar (nada se guarda).
   ============================================================ */

@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');
}
@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../vendor/fuentes/righteous.woff2) format('woff2');
}

:root {
  color-scheme: dark;

  /* Fondos */
  --noche:      #0B0F0D;   /* el negro del póster, con un dejo verde: nunca #000 */
  --noche-2:    #121915;   /* superficies elevadas: cajas, fichas, la cabecera */
  --noche-3:    #1A241E;   /* hover, código, filas alternas */
  --hoja:       #0F1511;   /* la hoja del compacto y del Anki */

  /* Texto */
  --crema:      #ECF1EA;   /* cuerpo (17:1) */
  --crema-2:    #B5C2B9;   /* secundario (10:1) */
  --crema-3:    #87958C;   /* pies, metadatos (6:1) */

  /* El verde y sus parientes */
  --verde:      #4CD69B;   /* EL acento: títulos, rótulos, enlaces (10:1) */
  --verde-2:    #9BF0C6;   /* hover */
  --menta:      #9BF0C6;   /* numerales, adornos y lo que el lector mueve en una figura */
  --menta-texto:#9BF0C6;
  --panel:      #43C58E;   /* el panel macizo de las definiciones */
  --sobre-panel:#04140C;   /* texto sobre ese panel (9:1) */

  /* El único azul: las notas de estudio (lo que no es del profesor) */
  --azul:       #8CC8EA;   /* (10:1) */

  /* El único cálido: lo que FALLA (una errata, un contraejemplo) */
  --alerta:     #FF8FAE;   /* (9:1) */

  /* Velos y líneas */
  --verde-velo:  rgba(76, 214, 155, .07);
  --menta-velo:  rgba(155, 240, 198, .08);
  --azul-velo:   rgba(140, 200, 234, .07);
  --alerta-velo: rgba(255, 143, 174, .08);
  --linea:       rgba(76, 214, 155, .5);    /* el filete de color: botones, chips, marcos */
  --filete:      rgba(236, 241, 234, .16);
  --filete-2:    rgba(236, 241, 234, .08);
  --sombra:      0 1px 0 rgba(0, 0, 0, .25), 0 16px 36px -22px rgba(0, 0, 0, .9);
  --estrellas:   .28;                        /* cuánto se ven las estrellas del fondo */
  --grano:       .06;

  /* Tipografía */
  --f-texto:   'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-display: 'Righteous', 'Space Grotesk', system-ui, sans-serif;
  --track-etq: .18em;      /* el tracking ancho de las etiquetas del póster */
  --cuerpo:    17px;
  --interlinea: 1.62;

  /* Medidas */
  --cab-alto:  58px;
  --medida:    42rem;      /* columna de lectura (~75 caracteres) */
  --margen:    15.5rem;    /* columna de notas al margen */
  --hueco:     2.75rem;    /* entre la columna y el margen */
  --ancho:     72rem;      /* ancho de las páginas de índice */
  --radio:     0;          /* el póster no redondea: cajas rectas */
  --filete-ancho: 1.5px;
}

/* La versión clara: la misma tinta sobre papel. */
:root[data-tema="dia"] {
  color-scheme: light;
  --noche:      #F3F6F1;
  --noche-2:    #E9EFE7;
  --noche-3:    #DCE5DA;
  --hoja:       #FAFCF9;
  --crema:      #0F1A14;   /* (16:1) */
  --crema-2:    #3B4A41;   /* (9:1) */
  --crema-3:    #56655C;   /* (6:1) */
  --verde:      #0A7547;   /* (5,8:1) */
  --verde-2:    #065C37;
  --menta:      #1B9563;   /* adornos y filetes (3,6:1: no para texto chico) */
  --menta-texto:#0A6B42;
  --panel:      #3DBB85;
  --sobre-panel:#04140C;
  --azul:       #1C5A88;   /* (7:1) */
  --alerta:     #B8204A;   /* (6:1) */
  --verde-velo:  rgba(10, 117, 71, .07);
  --menta-velo:  rgba(27, 149, 99, .09);
  --azul-velo:   rgba(28, 90, 136, .07);
  --alerta-velo: rgba(184, 32, 74, .07);
  --linea:       rgba(10, 117, 71, .45);
  --filete:      rgba(15, 26, 20, .16);
  --filete-2:    rgba(15, 26, 20, .08);
  --sombra:      0 1px 0 rgba(15, 26, 20, .04), 0 10px 30px -18px rgba(15, 26, 20, .3);
  --estrellas:   0;
  --grano:       .035;
}

@media (max-width: 700px) {
  :root { --cuerpo: 16.5px; --cab-alto: 52px; }
}