/* xTrace: roles de diseño. app.css solo puede usar estos roles; ningún valor suelto. */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --pagina: #F3F5F8;
  --superficie: #FFFFFF;
  --superficie-alta: #FFFFFF;
  --tinta: #0F1720;
  --tinta-parrafo: #3B4655;
  --tinta-secundaria: #556070;
  --borde: #D9DEE5;
  --borde-fila: #E4E8EE;
  --borde-control: #7A8594;
  --accion: #1D4ED8;
  --accion-fuerte: #1E3A8A;
  --sobre-accion: #FFFFFF;
  --seleccion-fondo: #E8EEFC;
  --seleccion-texto: #1E3A8A;
  --mapa-fondo: #E7ECF1;
  --estado-ok-fondo: #DCFCE7;
  --estado-ok-texto: #166534;
  --estado-aviso-fondo: #FEF3C7;
  --estado-aviso-texto: #92400E;
  --estado-critico-fondo: #FEE2E2;
  --estado-critico-texto: #B91C1C;
  --estado-neutro-fondo: #F1F4F8;
  --estado-neutro-texto: #3B4655;
  --foco: #1D4ED8;
  --deshabilitado-fondo: #E4E8EE;
  --deshabilitado-texto: #556070;
  --pulsado: #1E3A8A;

  --fuente-marca: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fuente-interfaz: "Inter", "Segoe UI", system-ui, sans-serif;
  --radio-s: 8px;
  --radio-m: 12px;
  --radio-l: 16px;
  --radio-pildora: 999px;
  --borde-ancho: 1px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --pagina: #0F1720;
  --superficie: #16222D;
  --superficie-alta: #1B2733;
  --tinta: #F1F4F8;
  --tinta-parrafo: #DDE3EA;
  --tinta-secundaria: #AEB8C4;
  --borde: #2A3744;
  --borde-fila: #34414E;
  --borde-control: #6B7A8C;
  --accion: #7BA4FF;
  --accion-fuerte: #BFD2FF;
  --sobre-accion: #0F1720;
  --seleccion-fondo: #1E3A8A;
  --seleccion-texto: #BFD2FF;
  --senal: #2BD4A4;
  --mapa-fondo: #1B2733;
  --estado-ok-fondo: #0F2E24;
  --estado-ok-texto: #86EFAC;
  --estado-aviso-fondo: #33260A;
  --estado-aviso-texto: #FCD34D;
  --estado-critico-fondo: #3B1416;
  --estado-critico-texto: #FCA5A5;
  --estado-neutro-fondo: #1E293B;
  --estado-neutro-texto: #CBD5E1;
  --foco: #7BA4FF;
  --deshabilitado-fondo: #1E293B;
  --deshabilitado-texto: #AEB8C4;
  --pulsado: #BFD2FF;
}

/* El encabezado y la tarjeta de indicador oscura son oscuros en los dos temas. */
:root {
  --enc-fondo: #0F1720;
  --enc-texto: #F1F4F8;
  --enc-senal: #2BD4A4;
  --enc-borde: #6B7A8C;
}