/* ============================================================
   tokens.css · Kahoot propio — Design tokens + Marca UAI (P7)
   ------------------------------------------------------------
   Punto único de verdad del look. La lógica del juego NO depende
   de estos valores; cambiar el tema (color madre / logo / fuente)
   sólo reescribe variables, sin tocar el motor.

   Se carga ANTES de styles.css. El acento de marca (--brand*) lo
   inyecta theme.js según el curso; aquí quedan sus valores por
   defecto (UAI institucional, celeste corporativo #6493B5).
   ============================================================ */

/* ---------- Tipografías UAI (self-host) ----------
   Deja los .woff2 en /public/fonts/ con estos nombres y se activan
   solas. Mientras no existan, el navegador usa el fallback (Poppins
   para títulos, un humanist sans para el cuerpo). La propia guía UAI
   indica Roboto para web como respaldo aceptable. */
/* Instalada: Made Tommy Black (peso ~900). Los títulos de la app usan 800–900,
   así que cubre las cabeceras/marca. Si más adelante sueltas Bold/Medium/Regular,
   descomenta sus @font-face; mientras, esos pesos caen a Poppins. */
@font-face {
  font-family: "Made Tommy";
  src: url("../fonts/MadeTommy-Black.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}
/*
@font-face { font-family: "Made Tommy"; src: url("../fonts/MadeTommy-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Made Tommy"; src: url("../fonts/MadeTommy-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Made Tommy"; src: url("../fonts/MadeTommy-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
*/
/* The Sans (cuerpo) es licenciada y aún NO está subida a /fonts. Sus @font-face
   quedan comentados para no pedir archivos inexistentes: como el hosting reescribe
   lo ausente a index.html, el navegador recibía HTML y logueaba "Failed to decode
   font / OTS parsing error". Sin @font-face, "The Sans" del stack cae limpio a
   Segoe UI / Roboto (respaldo web UAI). Cuando tengas los .woff2, súbelos a
   /public/fonts y descomenta este bloque. */
/*
@font-face {
  font-family: "The Sans";
  src: url("../fonts/TheSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "The Sans";
  src: url("../fonts/TheSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

:root {
  /* ---- Familias tipográficas ---- */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Made Tommy es geométrica redondeada → Poppins es el fallback más cercano. */
  --font-uai-title: "Made Tommy", "Poppins", var(--font-system);
  /* The Sans es humanista → Segoe UI / Roboto de respaldo (Roboto = fuente web UAI). */
  --font-uai-body: "The Sans", "Segoe UI", Roboto, var(--font-system);
  /* Activas (theme.js las conmuta uai/system). Por defecto: identidad UAI. */
  --font-title: var(--font-uai-title);
  --font-body: var(--font-uai-body);

  /* ---- Marca (color madre) · las inyecta theme.js; aquí el default UAI ---- */
  --brand: #6493b5;          /* celeste corporativo UAI (institucional) */
  --brand-strong: #567f9c;   /* hover */
  --brand-bright: #83a9c5;
  --brand-ink: #ffffff;      /* texto sobre relleno de marca */
  --brand-soft: rgba(100, 147, 181, 0.16);
  --brand-line: rgba(100, 147, 181, 0.38);
  --accent: var(--brand);    /* compat. histórica */
  --accent2: var(--brand-bright);

  /* ---- Corporativo UAI genérico (fijo) ---- */
  --uai-negro: #1d1e20;
  --uai-gris:  #c7c2ba;
  --uai-celeste: #6493b5;

  /* ---- Chasis: dashboard oscuro (estilo dashdarkX) ---- */
  --bg:        #0a1330;      /* fondo app */
  --bg2:       #0e1a3c;      /* 2º stop del degradado */
  --side-bg:   #0b1739;      /* sidebar */
  --side-line: #1b2a52;
  --panel:     #0d1b3e;      /* tarjetas */
  --panel-2:   #101f47;      /* superficie anidada (antes #f8fafc) */
  --panel-3:   #16264f;      /* inputs / botón ghost */
  --panel-elev:#122250;

  --ink:       #e8ecf6;      /* texto principal */
  --ink-soft:  #c3cbda;
  --ink-on-dark: #dce3f1;    /* texto sobre chasis (barras) */
  --muted:     #8a96b0;
  --line:      #22315a;

  /* ---- Semánticos (ajustados para fondo oscuro) ---- */
  --ok:  #22c55e;  --ok-ink:  #86efac;  --ok-bg:  rgba(34, 197, 94, 0.12);  --ok-border:  rgba(34, 197, 94, 0.34);
  --bad: #f87171;  --bad-ink: #fca5a5;  --bad-bg: rgba(248, 113, 113, 0.12); --bad-border: rgba(248, 113, 113, 0.34);
  --run: #fbbf24;  --run-ink: #fcd34d;  --run-bg: rgba(251, 191, 36, 0.12);  --run-border: rgba(251, 191, 36, 0.34);
  --info-bg: rgba(100, 147, 181, 0.14); --info-ink: #bcd3e6; --info-border: rgba(100, 147, 181, 0.34);

  /* ---- Colores de las 4 alternativas (identidad de juego Kahoot, fijos) ---- */
  --a: #e21b3c;  --b: #1368ce;  --c: #d89e00;  --d: #26890c;

  /* ---- Forma / sombra ---- */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-side: 0 8px 30px rgba(0, 0, 0, 0.35);
}