:root {
  color-scheme: light;
  --fx-navy: #0a192f;
  --fx-cyan: #00cfff;
  --fx-green: #33ff77;
  --fx-gradient: linear-gradient(120deg, #00cfff 0%, #33ff77 100%);
  --fx-cyan-ink: #0369a1;
  --fx-green-ink: #15803d;
  --fx-success: #16a34a;
  --fx-success-ink: #15803d;
  --fx-success-bg: #ecfdf3;
  --fx-info: #0284c7;
  --fx-info-ink: #0369a1;
  --fx-info-bg: #e8f7fc;
  --fx-warning: #f59e0b;
  --fx-warning-ink: #b45309;
  --fx-warning-bg: #fff7e6;
  --fx-danger: #dc2626;
  --fx-danger-ink: #b91c1c;
  --fx-danger-bg: #fef2f2;
  --fx-neutral-bg: #eef2f6;
  --fx-neutral-ink: #475569;
  --fx-canvas: #eef2f6;
  --fx-surface: #ffffff;
  --fx-surface-2: #f6f8fa;
  --fx-surface-3: #e9eef3;
  --fx-sunk: #fafbfc;
  --fx-text: #0b1625;
  --fx-text-soft: #334155;
  --fx-muted: #64748b;
  --fx-faint: #94a3b8;
  --fx-inverse: #ffffff;
  --fx-border: rgb(10 25 47 / 12%);
  --fx-border-soft: rgb(10 25 47 / 7%);
  --fx-border-strong: rgb(10 25 47 / 22%);
  --fx-border-action: rgb(0 207 255 / 55%);
  --fx-sidebar-bg: #081426;
  --fx-sidebar-surface: #0e1f38;
  --fx-sidebar-text: #d9e4ef;
  --fx-sidebar-muted: #8fa0b3;

  /*
   * El sidebar es oscuro en ambos temas, así que su texto activo no puede
   * derivar de --fx-inverse: en tema oscuro vale navy y pierde contraste.
   */
  --fx-sidebar-text-active: #ffffff;
  --fx-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --fx-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --fx-font-mono: "JetBrains Mono", "SFMono-Regular", consolas, monospace;
  --fx-fs-h1: clamp(1.75rem, 3vw, 2.5rem);
  --fx-fs-h2: clamp(1.35rem, 2vw, 1.75rem);
  --fx-fs-h3: 1.125rem;
  --fx-fs-body: 1rem;
  --fx-fs-small: 0.875rem;
  --fx-fs-code: 0.8125rem;
  --fx-fs-caption: 0.75rem;
  --fx-sp-1: 0.25rem;
  --fx-sp-2: 0.5rem;
  --fx-sp-3: 0.75rem;
  --fx-sp-4: 1rem;
  --fx-sp-5: 1.5rem;
  --fx-sp-6: 2rem;
  --fx-sp-8: 3rem;
  --fx-radius-sm: 0.5rem;
  --fx-radius-md: 0.75rem;
  --fx-radius-lg: 1rem;
  --fx-shadow-sm: 0 1px 2px rgb(10 25 47 / 8%);
  --fx-shadow-md: 0 16px 40px rgb(10 25 47 / 10%);
  --fx-sidebar-shadow: 0 20px 60px rgb(0 0 0 / 35%);
  --fx-focus-color: var(--fx-cyan-ink);
  --fx-focus-ring: 0 0 0 0.1875rem var(--fx-surface), 0 0 0 0.375rem var(--fx-focus-color);
  --fx-sidebar-width: 17rem;
  --fx-sidebar-compact-width: 5.25rem;
  --fx-sidebar-gutter: var(--fx-sp-5);
  --fx-scrollbar-size: 0.625rem;
  --fx-scrollbar-track: transparent;
  --fx-scrollbar-thumb: rgb(10 25 47 / 24%);
  --fx-scrollbar-thumb-hover: rgb(10 25 47 / 42%);
  --fx-topbar-height: 4.25rem;
  --fx-sidebar-z: 1040;
  --fx-backdrop-z: 1035;
  --fx-topbar-z: 1020;
  --fx-motion-fast: 140ms;
  --fx-motion-base: 220ms;

  /*
   * Puente Bootstrap → CFDIX. Sin él, [data-bs-theme="dark"] pinta inputs,
   * selects, tablas y divisores con su propia escala gris (#212529, #495057)
   * dentro de superficies navy CFDIX. Apuntan a tokens --fx-*, que ya cambian
   * por tema, así que una sola declaración cubre claro y oscuro.
   */
  --bs-body-bg: var(--fx-surface);
  --bs-body-color: var(--fx-text);
  --bs-emphasis-color: var(--fx-text);
  --bs-heading-color: var(--fx-text);
  /* Secundario en la escala CFDIX es --fx-text-soft; --fx-muted es terciario
     y sobre el canvas se queda en 4.23:1, por debajo de AA. */
  --bs-secondary-color: var(--fx-text-soft);
  --bs-secondary-bg: var(--fx-surface-2);
  --bs-tertiary-bg: var(--fx-surface-3);
  --bs-border-color: var(--fx-border-strong);
  --bs-link-color: var(--fx-cyan-ink);
  --bs-link-hover-color: var(--fx-cyan-ink);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color-rgb: 11, 22, 37;
}

:root[data-theme="dark"] {
  /* Los triples RGB no pueden derivarse de un token hex; van por tema. */
  --bs-body-bg-rgb: 10, 25, 47;
  --bs-body-color-rgb: 247, 250, 252;
  color-scheme: dark;
  --fx-canvas: #060f1e;
  --fx-surface: #0a192f;
  --fx-surface-2: #0e1f38;
  --fx-surface-3: #12283f;
  --fx-sunk: #050b15;
  --fx-text: #f7fafc;
  --fx-text-soft: #c7d0db;
  --fx-muted: #a0aab5;
  --fx-faint: #6b7686;
  --fx-inverse: #0a192f;

  /*
   * El tinte cian de enlaces se calculó para fondos claros: sobre las
   * superficies oscuras daba 2.97:1, por debajo del 4.5:1 que exige AA.
   */
  --fx-cyan-ink: #64dfff;
  --fx-border: rgb(255 255 255 / 9%);
  --fx-border-soft: rgb(255 255 255 / 6%);
  --fx-border-strong: rgb(255 255 255 / 18%);
  --fx-sidebar-bg: #050b15;
  --fx-sidebar-surface: #0e1f38;
  --fx-sidebar-text: #f7fafc;
  --fx-sidebar-muted: #a0aab5;
  --fx-success-bg: rgb(51 255 119 / 12%);
  --fx-success-ink: #72ff9c;
  --fx-info-bg: rgb(0 207 255 / 12%);
  --fx-info-ink: #64dfff;
  --fx-warning-bg: rgb(245 158 11 / 14%);
  --fx-warning-ink: #fbbf24;
  --fx-danger-bg: rgb(220 38 38 / 15%);
  --fx-danger-ink: #fb7185;
  --fx-neutral-bg: rgb(255 255 255 / 7%);
  --fx-neutral-ink: #c7d0db;
  --fx-scrollbar-thumb: rgb(255 255 255 / 18%);
  --fx-scrollbar-thumb-hover: rgb(255 255 255 / 32%);
}