/* ============================================================
   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, funcional-i3 en verde): un póster de ciencia ficción retro,
   fondo casi negro con estrellas y grano, texto crema y un acento. Esta
   lleva CIAN, el de una consola encendida. Lo del apunte del profesor
   va en crema; lo que añadimos nosotros —notas, figuras, desafíos— en
   LILA; lo que cuesta puntos, en rosa. Y como es un juego, hay ORO: XP,
   estrellas, jefes vencidos. El oro solo premia; nunca es texto corrido.

   Cada estado de una cadena tiene su color en las figuras (--e0…--e5),
   el mismo en todas: el estado 0 siempre es cian, el 1 oro, el 2 lila…

   Todo color de TEXTO pasa 4,5:1 sobre el fondo en los dos temas.
   ============================================================ */

@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: el negro del póster, con un dejo azul */
  --noche:      #0A0E12;
  --noche-2:    #111821;
  --noche-3:    #19232E;
  --hoja:       #0D131A;

  /* Texto */
  --crema:      #EAF0F3;   /* cuerpo (17:1) */
  --crema-2:    #B2C0C8;   /* secundario (10:1) */
  --crema-3:    #84939C;   /* pies, metadatos (6:1) */

  /* El cian y sus parientes */
  --acento:     #4FD3EE;   /* EL acento: títulos, rótulos, enlaces (11:1) */
  --acento-2:   #9AE9F8;   /* hover */
  --hielo:      #A8F0FF;   /* lo que el lector mueve en una figura */
  --hielo-texto:#A8F0FF;
  --panel:      #3CC2DE;   /* el panel macizo de las definiciones */
  --sobre-panel:#03141A;   /* texto sobre ese panel (9:1) */
  --sobre-acento:#0A0E12;

  /* El lila: lo nuestro (notas, figuras, desafíos) */
  --lila:       #C7B6FF;   /* (10:1) */
  /* El oro: lo que se gana */
  --oro:        #FFD166;   /* (12:1) */
  /* El rosa: lo que falla */
  --alerta:     #FF8FAE;   /* (9:1) */

  /* Los estados de una cadena, en las figuras */
  --e0: #4FD3EE; --e1: #FFD166; --e2: #C7B6FF; --e3: #FF8FAE; --e4: #7EE0A8; --e5: #EAF0F3;

  /* Velos y líneas */
  --acento-velo: rgba(79, 211, 238, .07);
  --hielo-velo:  rgba(168, 240, 255, .08);
  --lila-velo:   rgba(199, 182, 255, .07);
  --oro-velo:    rgba(255, 209, 102, .09);
  --alerta-velo: rgba(255, 143, 174, .08);
  --linea:       rgba(79, 211, 238, .5);
  --filete:      rgba(234, 240, 243, .16);
  --filete-2:    rgba(234, 240, 243, .08);
  --sombra:      0 1px 0 rgba(0, 0, 0, .25), 0 16px 36px -22px rgba(0, 0, 0, .9);
  --estrellas:   .28;
  --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;
  --cuerpo:    17px;
  --interlinea: 1.62;

  /* Medidas */
  --cab-alto:  58px;
  --medida:    42rem;
  --margen:    15.5rem;
  --hueco:     2.75rem;
  --ancho:     72rem;
  --radio:     0;
  --filete-ancho: 1.5px;
}

/* La versión clara: la misma tinta sobre papel. */
:root[data-tema="dia"] {
  color-scheme: light;
  --noche:      #F2F6F8;
  --noche-2:    #E7EEF2;
  --noche-3:    #D9E3E9;
  --hoja:       #FAFCFD;
  --crema:      #0E1820;
  --crema-2:    #384953;
  --crema-3:    #536570;
  --acento:     #0A6A80;   /* (6:1) */
  --acento-2:   #07525F;
  --hielo:      #1B8BA3;
  --hielo-texto:#0A6378;
  --panel:      #3AB7D2;
  --sobre-panel:#03141A;
  --sobre-acento:#F2F6F8;
  --lila:       #5A3DB5;   /* (7:1) */
  --oro:        #8A5A00;   /* (6:1) */
  --alerta:     #B8204A;
  --e0: #0A7A93; --e1: #A86E00; --e2: #6A4CC9; --e3: #C02A55; --e4: #1F8A55; --e5: #3C4A55;
  --acento-velo: rgba(10, 106, 128, .07);
  --hielo-velo:  rgba(27, 139, 163, .09);
  --lila-velo:   rgba(90, 61, 181, .07);
  --oro-velo:    rgba(138, 90, 0, .08);
  --alerta-velo: rgba(184, 32, 74, .07);
  --linea:       rgba(10, 106, 128, .45);
  --filete:      rgba(14, 24, 32, .16);
  --filete-2:    rgba(14, 24, 32, .08);
  --sombra:      0 1px 0 rgba(14, 24, 32, .04), 0 10px 30px -18px rgba(14, 24, 32, .3);
  --estrellas:   0;
  --grano:       .035;
}

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