:root {
  /* ============================================================
     Paleta de marca ASAP — navy + teal (autoritativa)
     ============================================================ */

  /* Marca */
  --navy: #1e2a6e;
  --navy-dark: #141b45;
  --navy-light: #2a3a8f;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --accent-bright: #2dd4bf; /* acento legible sobre fondos oscuros (login) */

  /* Ink scale — derivada del navy */
  --ink: #1e2a6e;
  --ink-strong: #141b45;
  --ink-muted: #5b6584;
  --ink-faint: #7c87a3;
  --muted: #5b6584;

  /* Surfaces — neutros fríos sutiles */
  --surface: #ffffff;
  --panel: #f9fafb;
  --soft: #f3f5f9;
  --surface-alt: #f6f7fb;
  --surface-hover: #eef1f7;
  --body-bg: #eef1f6;
  --head: #e8ecf4;
  --badge-bg: #eef1f6;

  /* Lines */
  --line: #dde2ec;
  --line-strong: #c4ccdb;

  /* Acento corporativo — teal (único acento de marca) */
  --accent-blue: var(--accent);
  --accent-cyan: var(--accent);
  --accent-teal: var(--accent);
  --kpi-yellow: var(--accent);

  /* Estados (sobrios, solo donde hay significado) */
  --status-ok: #15803d;
  --status-warn: #c2680a;
  --status-critical: #c0392b;
  --status-ok-soft: #e8f2ec;
  --status-warn-soft: #fbeede;
  --status-critical-soft: #f9e6e3;

  /* Legacy aliases */
  --red: var(--status-critical);
  --red-strong: var(--status-critical);
  --green: var(--status-ok);
  --amber: var(--status-warn);
  --amber-soft: var(--status-warn);
  --ok: var(--status-ok);
  --warn: var(--status-warn);
  --bad: var(--status-critical);
  --critical: var(--status-critical);

  /* Focus & shadows */
  --focus: rgba(15, 118, 110, 0.28);
  --ring: rgba(15, 118, 110, 0.20);
  --shadow: 0 1px 3px rgba(30, 42, 110, 0.08), 0 8px 24px rgba(30, 42, 110, 0.06);
  --shadow-soft: 0 1px 2px rgba(30, 42, 110, 0.05);

  /* Spacing & radius */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ============================================================
     Escala tipográfica normalizada (base 13px = html 81.25%).
     Jerarquía única por componente, aplicada al final de
     styles.css. No cambiar el tamaño base: ajustar estos tokens.
     ============================================================ */
  --fs-title-module: clamp(1.2rem, 1.6vw, 1.35rem); /* título de módulo: topbar y encabezados (15,6–17,5px) */
  --fs-title-section: 0.95rem;                      /* subtítulo de sección / h3 de panel (12,4px) */
  --fs-label: 12px;                                 /* label de tarjeta, uppercase, tracking amplio */
  --fs-kpi: clamp(1.35rem, 1.6vw, 1.6rem);          /* numeral KPI de tarjetas (17,5–20,8px) */
  --fs-body: 13px;                                  /* cuerpo de texto y tablas */
  --fs-meta: 12px;                                  /* metadatos, chips y señales */
}

/* ============================================================
   Tema oscuro — navy profundo sobrio (activado con el toggle
   día/noche; persiste en localStorage 'asap-theme').
   Solo se sobreescriben tokens: los componentes ya consumen
   variables, y styles.css tiene overrides puntuales
   [data-theme="dark"] para lo que no usa tokens.
   ============================================================ */
[data-theme="dark"] {
  /* Marca se mantiene; el acento sube de luminosidad para contraste */
  --accent: #14b8a6;
  --accent-dark: #0f766e;
  --accent-bright: #2dd4bf;

  /* Ink scale invertida: texto claro sobre navy profundo */
  --ink: #e6eaf7;
  --ink-strong: #f4f6fd;
  --ink-muted: #9aa5c6;
  --ink-faint: #79839f;
  --muted: #9aa5c6;

  /* Surfaces — navy profundo escalonado */
  --surface: #171d40;
  --panel: #131838;
  --soft: #0f1430;
  --surface-alt: #1c2350;
  --surface-hover: #252e60;
  --body-bg: #0b0f26;
  --head: #1c2350;
  --badge-bg: #1c2350;

  /* Lines */
  --line: #2c3560;
  --line-strong: #465282;

  /* Estados: más luminosos para contraste sobre fondos oscuros */
  --status-ok: #34c77b;
  --status-warn: #e5a04a;
  --status-critical: #e8736a;
  --status-ok-soft: rgba(52, 199, 123, 0.16);
  --status-warn-soft: rgba(229, 160, 74, 0.16);
  --status-critical-soft: rgba(232, 115, 106, 0.16);

  /* Focus & shadows */
  --focus: rgba(45, 212, 191, 0.35);
  --ring: rgba(45, 212, 191, 0.26);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.42), 0 10px 28px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.32);
}