/* Paleta y tipografía de ProctorPy: una sola fuente de verdad.
 *
 * La usan tanto la portada pública (landing.css) como la aplicación (site.css).
 * Van juntas a propósito: si cada superficie tuviera su propia copia, con el
 * tiempo se separarían y el producto se vería como dos productos distintos.
 *
 * Los colores de marca del proyecto son el azul #0038a8 y el rojo #d52b1e. Sobre
 * fondo oscuro el azul no llega al contraste necesario, así que se usa una
 * versión aclarada; el rojo de marca queda reservado para el logotipo, nunca
 * para estados del alumno.
 */

:root {
  /* Superficies, de más profunda a más elevada. */
  --fondo: #080b12;
  --fondo-2: #0d121c;
  --superficie: #111826;
  --superficie-2: #161f2e;

  --borde: #1e2836;
  --borde-fuerte: #2b3648;

  /* Texto, de más a menos énfasis. */
  --texto: #e8edf5;
  --texto-2: #9aa8bd;
  --texto-3: #6b7a91;

  --acento: #4d8dff;
  --acento-fuerte: #6ba1ff;
  --acento-suave: rgba(77, 141, 255, .12);
  --acento-borde: rgba(77, 141, 255, .35);

  /* Marca: solo para el logotipo. */
  --rojo-marca: #d52b1e;

  /* Estados de una sesión. Separados del acento y del rojo de marca para que
     el significado no dependa del color corporativo. */
  --limpio: #3ecf8e;
  --dudoso: #e5a53f;
  --sospechoso: #f2695c;
  --limpio-suave: rgba(62, 207, 142, .13);
  --dudoso-suave: rgba(229, 165, 63, .13);
  --sospechoso-suave: rgba(242, 105, 92, .13);

  /* Tres roles tipográficos: serif para titulares (peso institucional), sans
     para el cuerpo (claridad) y monoespaciada para datos y etiquetas técnicas.
     Todas del sistema: la página que promete que los datos no salen del país no
     debería pedirle una tipografía a un tercero. */
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  --radio: 6px;
}

/* Marca: un cuadrado azul con el filo rojo de la bandera. Se dibuja con CSS en
   vez de usar una imagen o un emoji para que se vea nítida en cualquier pantalla
   y siga el color del tema. */
.logo-marca {
  display: inline-block;
  width: .72rem;
  height: .72rem;
  background: var(--acento);
  border-right: .36rem solid var(--rojo-marca);
  flex: 0 0 auto;
}