/*
 * Tagra design tokens. Shared by the app (app.css) and the landing page (landing.css),
 * so the brand colour and the type stack have a single home.
 */
:root {
  /*
   * Palette: Acero claro — navy PRAXION
   * Fuente de verdad del color de marca: --accent.
   * UI usa var(--accent*). Fuera de CSS hay que alinear a mano:
   *   - manifest.webmanifest → theme_color / background_color
   *   - icons/tagra-icon.svg (maestro del ícono; los PNG se derivan de él).
   *     Usa el degradé aprobado #123A63 → #0B2545, con --accent en el medio.
   */
  --bg: #e8eef2;
  --bg-deep: #d5dee6;
  --surface: #f7f9fb;
  --surface-2: #eef3f7;
  --ink: #142433;
  --ink-soft: #3d5568;
  --ink-muted: #5a6d7c;
  --line: #d3dde2;
  --line-strong: #b7c5cd;

  --accent: #122A41;
  --accent-strong: #0b1a29;
  --accent-soft: #dce6ee;
  --accent-glow: rgba(18, 42, 65, 0.22);

  --hero-1: #1a3a56;
  --hero-2: var(--accent);
  --hero-3: #0b1a29;
  --hero-ink: #eef4f8;
  --hero-shadow: rgba(18, 42, 65, 0.32);

  /*
   * El color del rol PRAXION, no el de la marca. Marca lo que sólo ve el
   * SUPERADMIN: la franja del appbar, la pestaña activa de la consola y las
   * etiquetas de rol.
   *
   * NO se usa como relleno de botón. Era un violeta #7c3aed pintando los botones
   * de alta, y un botón violeta saturado en una pantalla de administración lee
   * como demo, no como herramienta. La acción primaria de la consola es el navy
   * de marca igual que en el resto de la app; el color del rol quedó donde
   * cumple su función — señalar contexto — y en ningún lado más.
   *
   * Petróleo y no otro azul: tiene que distinguirse del navy de marca a 3px de
   * franja, o deja de señalar nada. Tampoco entra en el terreno de --warn
   * (suspensión) ni de --danger, que ya significan otra cosa en esta pantalla.
   *
   * Para probar otro tono, cambiar sólo estas dos líneas.
   */
  --praxion: #0f5f66;
  --praxion-soft: rgba(15, 95, 102, 0.10);

  /*
   * Verde de estado sano. Existe sólo para el punto de "Activa" en la consola:
   * el estado bueno se leía con el mismo --accent-soft que las píldoras
   * informativas, así que activa y suspendida se distinguían por el texto y por
   * nada más. Un punto de color es lo que hace que una tabla de veinte empresas
   * se lea de un vistazo.
   */
  --good: #1c6b4a;
  --good-soft: #e2f2ea;

  --warn: #9a5b00;
  --warn-soft: #fff1d9;
  --danger: #b42318;
  --danger-soft: #fdecea;

  --radius: 14px;
  --radius-lg: 22px;
  --shell: 480px;
  --shell-narrow: 480px;
  --shell-cycle: 880px;
  --shell-wide: 1100px;
  --tap: 52px;
  --row: 68px;

  --font: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Outfit", "IBM Plex Sans", system-ui, sans-serif;
  --shadow: 0 10px 30px rgba(18, 42, 65, 0.08);
  --shadow-lg: 0 18px 40px rgba(18, 42, 65, 0.14);
}

/*
 * Both families ship a single latin subset at weight 400. Anything heavier is
 * synthesised by the browser, so prefer size, colour and letter-spacing over bold.
 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/outfit-latin.woff2") format("woff2");
}