/* Tokens de diseño de Centinela Servidores. Marca: azul #1457b8 (el ámbar solo para estados) (static/brand/paleta.css).
   Los colores de severidad y de estado son los de 04 §7.2 (el color nunca es el único indicador:
   cada uno lleva icono con forma propia y texto). Claro, oscuro y automático. */
:root {
  color-scheme: light dark;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* superficie y texto (claro) */
  --bg: #eef3fb;
  --panel: #ffffff;
  --fg: #12233b;
  --mut: #53657c;
  --bd: #dbe6f4;
  --bd-strong: #a6b8d3;
  --soft: #edf2fa;
  --acc: #1457b8;
  --acc-hover: #0e4494;
  --acc-soft: #e7f0fc;
  --btn-bg: #1457b8;
  --btn-fg: #ffffff;
  --focus: #1457b8;
  --accent2: #2f74d6;
  --brand-dark: #0b2a56;
  --shadow: 0 8px 30px rgba(23, 26, 51, 0.18);
  --scrim: rgba(23, 26, 51, 0.45);

  /* severidad */
  --sev-critical: #8a1c1c;
  --sev-high: #c2410c;
  --sev-medium: #9a6700;
  --sev-low: #0b6bb5;
  --sev-info: #566270;
  --sev-unknown: #566270;

  /* estados de ciclo de vida y salud */
  --st-ok: #0f7a54;
  --st-eol: #7e3fa8;
  --st-verify: #1457b8;
  --st-silenced: #566270;
  --st-nodata: #8a5a00;
  --st-error: #8a1c1c;
  --st-open: #b3321f;

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-pill: 999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --fs-xs: 0.75rem;
  --fs-s: 0.8125rem;
  --fs-m: 0.875rem;
  --fs-l: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-kpi: 2rem;

  --dur-fast: 120ms;
  --dur-med: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --header-h: 56px;
  --filterbar-h: 0px;
  --sidebar-w: 240px;
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --panel: #121b2c;
  --fg: #e6edf7;
  --mut: #9fb0c8;
  --bd: #25344d;
  --bd-strong: #4a6288;
  --soft: #182338;
  --acc: #7fb0f0;
  --acc-hover: #a3c6f6;
  --acc-soft: #1a2c4a;
  --btn-bg: #7fb0f0;
  --btn-fg: #0b1a33;
  --focus: #a3c6f6;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 4, 0.65);

  --sev-critical: #ff8080;
  --sev-high: #ff9a5c;
  --sev-medium: #e3b341;
  --sev-low: #58a6ff;
  --sev-info: #9fb0c8;
  --sev-unknown: #9fb0c8;

  --st-ok: #3fb97f;
  --st-eol: #c79bf0;
  --st-verify: #7fb0f0;
  --st-silenced: #9fb0c8;
  --st-nodata: #e3b341;
  --st-error: #ff8080;
  --st-open: #ff8c7d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --panel: #121b2c;
    --fg: #e6edf7;
    --mut: #9fb0c8;
    --bd: #25344d;
    --bd-strong: #4a6288;
    --soft: #182338;
    --acc: #7fb0f0;
    --acc-hover: #a3c6f6;
    --acc-soft: #1a2c4a;
    --btn-bg: #7fb0f0;
    --btn-fg: #0b1a33;
    --focus: #a3c6f6;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 4, 0.65);

    --sev-critical: #ff8080;
    --sev-high: #ff9a5c;
    --sev-medium: #e3b341;
    --sev-low: #58a6ff;
    --sev-info: #9fb0c8;
    --sev-unknown: #9fb0c8;

    --st-ok: #3fb97f;
    --st-eol: #c79bf0;
    --st-verify: #7fb0f0;
    --st-silenced: #9fb0c8;
    --st-nodata: #e3b341;
    --st-error: #ff8080;
    --st-open: #ff8c7d;
  }
}

@media (max-width: 767.98px) {
  :root { --header-h: 52px; }
}