/* Tokens de diseño. Un solo lugar para color, tipografía, espacio y radios. */
:root {
  /* Marca: azul medido del logo oficial (#00569B) */
  --brand: #00569b;
  --brand-600: #0a6bb8;
  --brand-soft: #e5f0f9;

  /* Tinta: azul profundo del mismo tono que la marca, para navegación y texto */
  --ink-950: #041d34;
  --ink-900: #062b4b;
  --ink-800: #0e3d66;
  --ink-600: #3f566e;
  --ink-500: #5a6e82;
  --ink-300: #c3ccd6;
  --ink-200: #dde3ea;

  /* Papel y superficies */
  --paper: #f5f7fa;
  --surface: #ffffff;
  --line: #e1e7ee;
  --line-strong: #c9d3de;

  /* Señales. El ámbar se reserva para acciones y alertas. */
  --signal: #c9701c;        /* ámbar: atención, desvío */
  --action: #f0a03c;        /* ámbar de acción (botón principal) */
  --action-hover: #f5b05a;
  --signal-soft: #fbf0e3;
  --positive: #17766f;      /* verde azulado: cumplimiento */
  --positive-soft: #e5f3f1;
  --negative: #b3261e;      /* rojo: vencido, error */
  --negative-soft: #fbe9e7;
  --info: #00569b;          /* serie principal: azul de marca */
  --info-soft: #e5f0f9;
  --series-2: #6f8fb0;      /* serie secundaria (neutra) */

  /* Texto */
  --text: #0a2540;
  --text-muted: #566a7e;
  --text-on-ink: #e8f0f8;
  --text-on-ink-muted: #9db4cb;

  /* Tipografía */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.25rem;
  --fs-kpi: 2rem;

  /* Espacio (base 4px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Radios: pocos y coherentes */
  --r-sm: 6px;
  --r-md: 10px;

  --shadow-pop: 0 12px 32px rgba(7, 22, 42, 0.14);
  --focus: 0 0 0 3px rgba(47, 109, 181, 0.45);

  --sidebar-w: 248px;
  --topbar-h: 64px;
  --content-max: 1240px;
  --gutter: 24px;
}

@media (max-width: 880px) {
  :root { --gutter: 16px; --fs-2xl: 1.875rem; --fs-kpi: 1.625rem; }
}

:root:not([data-theme="light"]) {
  color-scheme: light;
}

/* Monitores grandes: más ancho útil sin estirar el contenido indefinidamente. */
@media (min-width: 1600px) {
  :root { --content-max: 1560px; --gutter: 40px; --sidebar-w: 272px; --fs-kpi: 2.25rem; --fs-base: 1rem; --fs-sm: 0.875rem; }
}
@media (min-width: 2200px) {
  :root { --content-max: 1800px; }
}