/*
 * Tema «dark refinado» — tokens correctores (piloto /demo).
 * Fuente de verdad de la escala de color y el radio; tailwind.config en
 * base.html refleja estos valores en literal para poder usar los
 * modificadores de alfa de Tailwind (bg-bg/90, etc.).
 *
 * Reglas de uso:
 *  - --accent (cian) SOLO en interacción (enlaces, hover, foco), la marca RI
 *    y EL dato protagonista de cada vista (en /demo: el F1).
 *  - --ok/--warn/--bad SOLO sobre valores con significado (accept/aviso/reject),
 *    nunca en etiquetas ni iconos decorativos.
 *  - Un solo radio (--radius) en toda la UI; solo los LED siguen redondos.
 *  - Paneles opacos: la separación la dan el borde 1px y el salto de
 *    luminancia panel/fondo, no sombras ni gradientes.
 */

:root {
  /* superficies (opacas, sin alfa) */
  --bg:            #0b1020;
  --panel:         #111729;
  --panel-2:       #131a2e;
  --border:        #222b42;
  --border-strong: #2e3a58;

  /* texto — contrastes sobre --panel: 15,0:1 / 7,3:1 / 5,2:1 */
  --text-1: #e8ecf4;
  --text-2: #9aa6bf;
  --text-3: #7e8aa6;

  /* acento e interacción */
  --accent: #22d3ee;

  /* semánticos */
  --ok:   #34d399;
  --warn: #fbbf24;
  --bad:  #fb7185;

  --radius: 6px;
}

/* foco visible y sobrio en toda la UI */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* kicker (overline tipográfico): el único letter-spacing ancho del sistema.
   No se llama .overline para no chocar con la utilidad overline de Tailwind. */
.kicker {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* número de métrica: cifras tabulares, tracking apretado */
.metric-num {
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* badge sobrio: fondo tenue al 10 %, sin glow ni borde de color */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.badge-ok      { background: rgb(52 211 153 / 0.10);  color: var(--ok); }
.badge-warn    { background: rgb(251 191 36 / 0.10);  color: var(--warn); }
.badge-bad     { background: rgb(251 113 133 / 0.10); color: var(--bad); }
.badge-neutral { background: var(--panel-2); color: var(--text-2); border: 1px solid var(--border); }