/* NextGen DS · tokens. ÚNICO lugar con valores crudos (colores, tamaños, curvas).
   ui.css, shell.css y bridge.css sólo leen var(--ng-*): cambiar el look de todo NextGen = cambiar este archivo.
   Un look alterno se prueba copiando este archivo y cambiando su nombre en NG_DS_CSS (ds.php).

   Modo oscuro: SÓLO con data-theme="dark" en <html>. A propósito no se sigue prefers-color-scheme:
   los módulos que aún no migran pintan colores fijos y quedarían claros dentro de un marco oscuro. */
:root {
  /* color */
  --ng-bg: #f6f7fa;
  --ng-surface: #ffffff;
  --ng-surface-2: #eff2f7;
  --ng-border: #e2e6ee;
  --ng-border-strong: #c9d0dc;
  --ng-fg: #0f1a2e;
  --ng-fg-2: #4a5570;
  --ng-fg-3: #77819a;
  --ng-brand: #14285a;          /* = --color-principal de main.css */
  --ng-accent: #2357bd;         /* = --color-secundario de main.css */
  --ng-accent-hover: #1c48a0;
  --ng-accent-soft: #e8eefb;
  --ng-accent-fg: #ffffff;
  --ng-ok: #157a55;      --ng-ok-soft: #e4f3ec;
  --ng-warn: #9a5c06;    --ng-warn-soft: #fbf0dc;
  --ng-danger: #c22a31;  --ng-danger-soft: #fbe8e9;
  --ng-kind-2: #0f766e;  --ng-kind-2-soft: #e3f3f1;   /* segundo tipo de solicitud (códigos, en Proveedores) */
  --ng-focus: rgba(35, 87, 189, .32);
  --ng-overlay: rgba(15, 26, 46, .38);
  --ng-code-bg: #121a2b;        /* paneles de código: payload JSON, memos de validación */
  --ng-code-fg: #d5dceb;
  --ng-shadow-sm: 0 1px 2px rgba(15, 26, 46, .06);
  --ng-shadow-md: 0 1px 2px rgba(15, 26, 46, .05), 0 4px 12px rgba(15, 26, 46, .07);
  --ng-shadow-lg: 0 2px 4px rgba(15, 26, 46, .05), 0 16px 40px rgba(15, 26, 46, .14);

  /* tipografía */
  --ng-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ng-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ng-fs-xs: 12px; --ng-fs-sm: 13px; --ng-fs-md: 14px; --ng-fs-lg: 16px; --ng-fs-xl: 20px; --ng-fs-2xl: 28px;

  /* forma */
  --ng-r-sm: 6px; --ng-r-md: 8px; --ng-r-lg: 12px; --ng-r-full: 999px;
  --ng-h-control: 34px;

  /* marco de la app */
  --ng-sidebar-w: 320px;
  --ng-header-h: 52px;

  /* movimiento (curvas del skill de diseño de Emil Kowalski) */
  --ng-speed: 1;
  --ng-ease-out: cubic-bezier(.23, 1, .32, 1);
  --ng-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ng-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ng-t-press: calc(120ms * var(--ng-speed));
  --ng-t-fast: calc(160ms * var(--ng-speed));
  --ng-t-base: calc(200ms * var(--ng-speed));
  --ng-t-slow: calc(280ms * var(--ng-speed));
}

:root[data-theme="dark"] {
  --ng-bg: #0b1020; --ng-surface: #121829; --ng-surface-2: #19213a; --ng-border: #232c45; --ng-border-strong: #34405f;
  --ng-fg: #e6eaf3; --ng-fg-2: #a5afc4; --ng-fg-3: #737e98; --ng-brand: #c8d5f6;
  --ng-accent: #5f8ff2; --ng-accent-hover: #7aa2f5; --ng-accent-soft: #1a2750; --ng-accent-fg: #0b1020;
  --ng-ok: #4cc08f; --ng-ok-soft: #0f2a20; --ng-warn: #e2a64c; --ng-warn-soft: #2c2010; --ng-danger: #f06d73; --ng-danger-soft: #301519;
  --ng-kind-2: #3dbcae; --ng-kind-2-soft: #0e2a28;
  --ng-focus: rgba(95, 143, 242, .4); --ng-overlay: rgba(3, 6, 14, .62);
  --ng-code-bg: #070b16; --ng-code-fg: #d5dceb;
  --ng-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --ng-shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .3);
  --ng-shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* Sin movimiento: se conservan los fundidos, se quitan desplazamientos (ui.css y shell.css lo respetan). */
@media (prefers-reduced-motion: reduce) {
  :root { --ng-speed: .001; }
}