/* =====================================================================
tokens.css — Design tokens estilo IBM Carbon Design System
Tema claro (White) por defecto + tema oscuro (Gray 100) preparado.
Cambia el tema con (ver app.js / AppHeader).
===================================================================== */
/* ---- Tipografia ----
IBM Plex se carga con desde el , no con @import: un @import
dentro del CSS no se descubre hasta haber descargado y parseado este
archivo, encadenando dos viajes antes de pintar texto. Medido en local, la
hoja de fuentes no se pedia hasta los 965ms y los .woff2 hasta los 1855ms.
El con preconnect los lanza de inmediato. --font-sans y --font-mono
quedan mas abajo, con su pila de reserva. */
:root {
/* ---------- Paleta Carbon ---------- */
--cds-white: #ffffff;
/* Acentos de marca. El branding por empresa elige una familia y de sus pasos
salen los tokens: 10 fondo suave, 40 tinta en tema oscuro, 60 base,
80 activo. El hover es el medio paso entre el 60 y el 70, que Carbon deja
fuera de la escala. Ver config/branding.php */
--cds-blue-10: #edf5ff;
--cds-blue-20: #d0e2ff;
--cds-blue-40: #78a9ff;
--cds-blue-50: #4589ff;
--cds-blue-60: #0f62fe; /* interactive primary */
--cds-blue-70: #0043ce;
--cds-blue-80: #002d9c;
--cds-blue-90: #001d6c;
--cds-cyan-10: #e5f6ff;
--cds-cyan-20: #bae6ff;
--cds-cyan-40: #33b1ff;
--cds-cyan-50: #1192e8;
--cds-cyan-60: #0072c3;
--cds-cyan-70: #00539a;
--cds-cyan-80: #003a6d;
--cds-teal-10: #d9fbfb;
--cds-teal-20: #9ef0f0;
--cds-teal-40: #08bdba;
--cds-teal-50: #009d9a;
--cds-teal-60: #007d79;
--cds-teal-70: #005d5d;
--cds-teal-80: #004144;
--cds-purple-10: #f6f2ff;
--cds-purple-20: #e8daff;
--cds-purple-40: #be95ff;
--cds-purple-50: #a56eff;
--cds-purple-60: #8a3ffc;
--cds-purple-70: #6929c4;
--cds-purple-80: #491d8b;
--cds-magenta-10: #fff0f7;
--cds-magenta-20: #ffd6e8;
--cds-magenta-40: #ff7eb6;
--cds-magenta-60: #d02670;
--cds-magenta-70: #9f1853;
--cds-magenta-80: #740937;
/* Estados. Reservados por Carbon para exito, error y advertencia: no se
ofrecen como acento de marca para que un boton no se confunda con una
confirmacion */
--cds-green-10: #defbe6;
--cds-green-20: #a7f0ba;
--cds-green-40: #42be65;
--cds-green-50: #24a148;
--cds-green-60: #198038;
--cds-green-70: #0e6027;
--cds-red-10: #fff1f1;
--cds-red-20: #ffd7d9;
--cds-red-40: #ff8389;
--cds-red-50: #fa4d56;
--cds-red-60: #da1e28;
--cds-red-70: #a2191f;
--cds-red-80: #750e13;
--cds-yellow-10: #fcf4d6;
--cds-yellow-20: #fddc69;
--cds-yellow-30: #f1c21b;
/* El paquete oficial IBM_Colors_RGB_HEX_v2.1 trae las familias completas de
azul, cian, teal, purpura, magenta, verde, rojo y gris, pero de amarillo y
naranja solo incluye un tono cada una: Yellow_30 y Orange_40. El 70 de
amarillo se conserva con el valor que ya usaba la notificacion de
advertencia; no se ha podido contrastar con la fuente. */
--cds-yellow-70: #684e00;
--cds-yellow-60: #8e6a00;
--cds-orange-20: #ffd9be;
--cds-orange-40: #ff832b;
--cds-orange-70: #8a3800;
/* Neutros. `cool-gray` es la variante fria que Carbon ofrece junto al gris
neutro; la interfaz la usa en un par de superficies. */
--cds-cool-gray-10: #f2f4f8;
--cds-cool-gray-20: #dde1e6;
--cds-cool-gray-60: #697077;
--cds-gray-10: #f4f4f4;
--cds-gray-20: #e0e0e0;
--cds-gray-30: #c6c6c6;
--cds-gray-40: #a8a8a8;
--cds-gray-50: #8d8d8d;
--cds-gray-60: #6f6f6f;
--cds-gray-70: #525252;
--cds-gray-80: #393939;
--cds-gray-90: #262626;
--cds-gray-100: #161616;
/* ---------- Tokens semánticos (TEMA CLARO) ---------- */
--background: var(--cds-white);
--layer-01: var(--cds-gray-10);
--layer-02: var(--cds-white);
--layer-hover: #e8e8e8;
--layer-selected: var(--cds-gray-20);
/* Un escalon por debajo del acento de capa. Es el fondo que Carbon da a la
cabecera ordenada y al pasar por encima de una ordenable: sobre
layer-accent hay que oscurecer, no aclarar, o el resalte va al reves. */
--layer-selected-hover: #d1d1d1;
/* Carbon distingue la capa del acento de capa: layer-01 es el fondo de un
panel y layer-accent-01 es un escalon mas oscuro, reservado para cosas
como la cabecera de una tabla. Faltaba, y por eso el thead usaba layer-01
y se confundia con el cuerpo. */
--layer-accent: var(--cds-gray-20);
/* Carbon distingue el hover de una CAPA (layer-hover, opaco, para
superficies apiladas) del hover sobre el FONDO de pagina, que es un velo
translucido de gray-50 al 12%. Los controles que se apoyan directamente
en el fondo -paginacion, por ejemplo- usan este. */
--background-hover: rgba(141, 141, 141, .12);
--field-01: var(--cds-gray-10);
--field-02: var(--cds-white);
--border-subtle: var(--cds-gray-20);
/* El escalon que el token de arriba aplana. `--border-subtle` vale lo que
Carbon pide sobre layer-02, que es la superficie de casi todo aqui, pero
un acordeon anidado se dibuja sobre layer-01 y alli la linea tiene que
ser un paso mas oscura: gray-30, no gray-20, que sobre #f4f4f4 se queda
en 1.06 de contraste y desaparece. Solo lo usa quien va sobre layer-01. */
--border-subtle-01: var(--cds-gray-30);
--border-strong: var(--cds-gray-50);
--border-interactive: var(--cds-blue-60);
--text-primary: var(--cds-gray-100);
--text-secondary: var(--cds-gray-70);
--text-placeholder: var(--cds-gray-40);
--text-on-color: var(--cds-white);
--text-on-color-disabled: var(--cds-gray-50);
--text-helper: var(--cds-gray-60);
--text-disabled: var(--cds-gray-30);
--link-primary: var(--cds-blue-60);
/* Texto de error sobre una capa. No vale --support-error: ese tono esta
calibrado para hacer de fondo o de borde, y como tinta sobre la capa
oscura se queda en 3,44:1. Carbon sube un escalon la paleta cuando el
color de estado hace de texto. */
--text-error: var(--cds-red-60);
--interactive: var(--cds-blue-60);
/* Foco. components.css lo pedia como `var(--focus, var(--interactive))` y
nadie lo habia definido: en tema claro el respaldo acierta por casualidad
(Carbon tambien usa blue-60), pero en oscuro Carbon cambia a blanco y el
respaldo habria seguido pintando azul sobre gray-100. */
--focus: var(--cds-blue-60);
--focus-inset: var(--cds-white);
--focus-inverse: var(--cds-white);
/* Botones. Los tres primarios y sus hover ya coincidian exactos con Carbon
(#0050e6 es blue-60-hover y #474747 es gray-80-hover). Faltaban los
estados active, el deshabilitado, el separador y toda la familia
tertiary, que Carbon define y aqui no existia.
--button-danger-hover estaba en #b81922 y la especificacion dice #b81921. */
--button-primary: var(--cds-blue-60);
--button-primary-hover: #0050e6;
--button-primary-active: var(--cds-blue-80);
--button-secondary: var(--cds-gray-80);
--button-secondary-hover: #474747;
--button-secondary-active: var(--cds-gray-60);
--button-tertiary: var(--cds-blue-60);
--button-tertiary-hover: #0050e6;
--button-tertiary-active: var(--cds-blue-80);
--button-danger-hover: #b81921;
--button-danger-active: var(--cds-red-80);
--button-disabled: var(--cds-gray-30);
--button-separator: var(--cds-gray-20);
/* Carbon lo llama button-danger-primary; se conserva el nombre corto que ya
usaba el ERP y se anade el oficial como sinonimo. */
--button-danger: var(--cds-red-60);
--button-danger-primary: var(--cds-red-60);
--button-danger-secondary: var(--cds-red-60);
--support-success: var(--cds-green-50);
--support-error: var(--cds-red-60);
--support-warning: var(--cds-yellow-30);
--support-info: var(--cds-blue-60);
/* ---------- Tag (etiquetas de estado) ----------
Formula oficial del tema White, de packages/themes/src/dtcg/components/
tag.json: fondo = paso 20 de la familia, texto = paso 70, borde = paso 40.
Son colores solidos de la paleta, no capas translucidas: el ERP venia
pintando estos fondos con rgba(...,.12-.18) calculados a ojo, que sobre
una fila con hover cambian de tono porque dejan pasar el fondo de debajo.
Carbon define diez familias de tag y ninguna es amarilla ni naranja.
Como el ERP necesita marcar advertencias, --tag-*-warning y --tag-*-caution
quedan abajo como EXTENSION PROPIA, construidas con la misma formula
20/70 para que no desentonen. Estan aparte a proposito: quien lea esto
debe saber que ese par no viene de Carbon. */
--tag-background-gray: var(--cds-gray-20);
--tag-color-gray: var(--cds-gray-100);
--tag-background-blue: var(--cds-blue-20);
--tag-color-blue: var(--cds-blue-70);
--tag-background-green: var(--cds-green-20);
--tag-color-green: var(--cds-green-70);
--tag-background-red: var(--cds-red-20);
--tag-color-red: var(--cds-red-70);
--tag-background-purple: var(--cds-purple-20);
--tag-color-purple: var(--cds-purple-70);
--tag-background-magenta: var(--cds-magenta-20);
--tag-color-magenta: var(--cds-magenta-70);
--tag-background-teal: var(--cds-teal-20);
--tag-color-teal: var(--cds-teal-70);
--tag-background-cyan: var(--cds-cyan-20);
--tag-color-cyan: var(--cds-cyan-70);
/* Extension propia: Carbon no publica tag amarillo ni naranja. */
--tag-background-warning: var(--cds-orange-20);
--tag-color-warning: var(--cds-orange-70);
--tag-background-caution: var(--cds-yellow-20);
--tag-color-caution: var(--cds-yellow-70);
--icon-primary: var(--cds-gray-100);
--icon-secondary: var(--cds-gray-70);
--overlay: rgba(22,22,22,.5);
--skeleton-bg: #e5e5e5;
--skeleton-shine: var(--cds-gray-10);
--shadow-sm: 0 2px 6px rgba(0,0,0,.10);
--shadow-md: 0 4px 16px rgba(0,0,0,.16);
/* ---------- Layout ---------- */
--header-h: 48px;
/* 256px = 32 mini-unidades de 8px, el ancho del side nav expandido de
Carbon (ui-shell/side-nav/_side-nav.scss, que lo usa como medida y como
tope). Estaba en 280px, que no es una anchura del sistema. El margen
izquierdo del contenido cuelga de este mismo token, asi que se corrige
solo. */
--sidebar-w: 16rem;
--sidebar-collapsed-w: 48px;
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* ---------- Movimiento (escala oficial de Carbon) ----------
Los seis pasos y las seis curvas salen de @carbon/motion:
packages/motion/src/dtcg/motion.json. Antes habia tres duraciones
inventadas (.2s/.3s/.45s) que no correspondian a ningun token de Carbon.
Productive es el modo de una herramienta de trabajo: el movimiento informa
y se aparta. Expressive queda para lo que debe reclamar atencion, como un
error que interrumpe. Un ERP vive casi entero en productive.
Entrance y exit no son la misma curva: lo que entra arranca a velocidad
cero y desacelera; lo que sale arranca ya en movimiento y acelera al irse.
Usar `standard` para las tres es lo que hacia el sistema hasta ahora. */
--dur-fast-01: 70ms; /* microinteraccion: boton, toggle */
--dur-fast-02: 110ms; /* fundido de elementos pequenios */
--dur-moderate-01: 150ms; /* velocidad de transicion por defecto */
--dur-moderate-02: 240ms; /* expansion, toast, avisos del sistema */
--dur-slow-01: 400ms; /* expansion grande, notificacion importante */
--dur-slow-02: 700ms; /* atenuado de fondo, transicion de portada */
--ease-standard: cubic-bezier(.2, 0, .38, .9);
--ease-entrance: cubic-bezier(0, 0, .38, .9);
--ease-exit: cubic-bezier(.2, 0, 1, .9);
--ease-standard-expressive: cubic-bezier(.4, .14, .3, 1);
--ease-entrance-expressive: cubic-bezier(0, 0, .3, 1);
--ease-exit-expressive: cubic-bezier(.4, .14, 1, 1);
/* Alias de compatibilidad. Los 17 usos que ya existian en el CSS apuntan
aqui y quedan alineados a Carbon sin tocar cada declaracion. Al migrar
esas hojas a los nombres de arriba, estos tres se borran. */
--dur-fast: var(--dur-fast-02);
--dur-base: var(--dur-moderate-01);
--dur-slow: var(--dur-slow-01);
--ease: var(--ease-standard);
/* ---------- Acento de marca dinámico (branding por empresa) ---------- */
--brand: var(--cds-blue-60);
--brand-soft: var(--cds-blue-10);
/* ---------- Escala de espaciado Carbon ----------
Todos los pasos son multiplos de la mini-unidad de 8px
(packages/layout/src/index.ts): 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10,
12 y 20 mini-unidades. Del 01 al 09 ya estaban y coinciden exactos; del 10
al 13 faltaban, que son los que Carbon usa para margenes de pagina y
separacion entre secciones grandes. */
--sp-01: .125rem; --sp-02: .25rem; --sp-03: .5rem; --sp-04: .75rem;
--sp-05: 1rem; --sp-06: 1.5rem; --sp-07: 2rem; --sp-08: 2.5rem; --sp-09: 3rem;
--sp-10: 4rem; /* 64px */
--sp-11: 5rem; /* 80px */
--sp-12: 6rem; /* 96px */
--sp-13: 10rem; /* 160px */
/* ---------- Escala tipografica ----------
Carbon type scale sobre una raiz de 16px. Antes de estos tokens la
tipografia vivia en las vistas: 2042 declaraciones de `font-size` con 62
valores distintos, entre ellos siete tamanos entre 9,9px y 11,5px que
nadie puede distinguir. Los pasos de abajo son el destino al que se
absorben; los huerfanos mas comunes son 0.8125rem (13px), que baja a
`--type-size-01` o sube a `--type-size-02` segun el rol, y 0.6875rem
(11px), que sube a `--type-size-01`.
El cuerpo de la aplicacion es `--type-size-02` (14px). En movil se queda
corto y ademas dispara el zoom automatico de iOS, que reacciona por
debajo de 16px; subirlo es un cambio visual y va aparte. */
--type-size-01: 0.75rem; /* 12px etiquetas, pies, texto de ayuda */
--type-size-02: 0.875rem; /* 14px cuerpo por defecto */
--type-size-03: 1rem; /* 16px cuerpo largo, minimo comodo en movil */
--type-size-04: 1.125rem; /* 18px */
--type-size-05: 1.25rem; /* 20px */
--type-size-06: 1.5rem; /* 24px titulo de pagina */
--type-size-07: 1.75rem; /* 28px */
--type-size-08: 2rem; /* 32px */
--type-size-09: 2.25rem; /* 36px cifras de tarjeta resumen */
/* Roles: nombran el uso, no el tamano. Una vista pide `--type-body`, no
14px, y el dia que el cuerpo suba a 16px no hay que tocar la vista. */
--type-caption: var(--type-size-01);
--type-body: var(--type-size-02);
--type-body-lg: var(--type-size-03);
--type-heading-sm: var(--type-size-05);
--type-heading: var(--type-size-06);
--type-heading-lg: var(--type-size-07);
--type-display: var(--type-size-09);
/* Pesos. Carbon define TRES y solo tres (packages/type/src/fontWeight.ts):
light 300, regular 400, semibold 600. No existe el 500 ni el 700.
El semibold se usa hoy cuatro veces mas que el regular porque la jerarquia
se venia construyendo engrosando el texto en vez de con la escala de
tamanos. Con la escala disponible, el cuerpo deberia volver a regular. */
--type-weight-light: 300;
--type-weight-regular: 400;
--type-weight-semibold: 600;
/* Alias en retirada. `medium` (500) y `bold` (700) no son pesos de Carbon,
pero quedan 315 usos en las vistas y 16 en las hojas propias. Borrarlos
dejaria ese texto sin font-weight; por eso apuntan al semibold, que es el
peso legal mas cercano y conserva el enfasis que buscaban: ambos se usan
casi siempre en encabezados y celdas destacadas.
Al migrar las vistas se sustituyen por --type-weight-semibold y se borran.
Ojo: en un componente concreto manda su spec, no este alias. El Tag de
Carbon, por ejemplo, es label-01 y va en regular 400, no en semibold. */
--type-weight-medium: var(--type-weight-semibold);
--type-weight-bold: var(--type-weight-semibold);
/* Interlineado */
--type-leading-tight: 1.25;
--type-leading-base: 1.43;
--type-leading-relaxed: 1.6;
/* ---------- Superficie del sidenav (claro por defecto) ---------- */
--sidenav-bg: var(--cds-white);
--sidenav-active-bg: var(--cds-gray-10);
--sidenav-text: var(--cds-gray-70);
--sidenav-text-strong: var(--cds-gray-100);
--sidenav-hover: var(--cds-gray-10);
--sidenav-border: var(--cds-gray-20);
/* ---------- Notificaciones ----------
Fondos y textos de las notificaciones inline de Carbon. Existen como
tokens porque el color de estado no puede ir escrito a mano en la vista:
en tema oscuro un #defbe6 fijo deja un bloque claro sobre fondo negro. */
--notification-bg-success: var(--cds-green-10);
--notification-bg-error: var(--cds-red-10);
--notification-bg-warning: #fdf6dd;
--notification-bg-info: var(--cds-blue-10);
--notification-text-success: var(--cds-green-70);
--notification-text-error: var(--cds-red-70);
--notification-text-warning: var(--cds-yellow-70);
--notification-text-info: var(--cds-blue-70);
/* ---------- Carbon for AI ----------
Marcan contenido generado o sugerido por IA. Carbon lo resuelve con
"efectos de luz: brillo, resplandor y degradados" naciendo en los bordes
del contenedor, con difusion contenida para no perder contraste.
El degradado va de blue-60 a purple-60, que ya estan en la paleta.
Regla de Carbon: nunca usarlos como decoracion. Si un elemento los lleva,
es porque hay IA detras; si el usuario edita el valor, se le quitan.
Ver docs/desarrollo/carbon-for-ai.md */
--ai-aura-start: rgba(69, 137, 255, 0.16);
--ai-aura-end: rgba(138, 63, 252, 0);
--ai-border-start: var(--cds-blue-50);
--ai-border-end: var(--cds-purple-60);
--ai-inner-shadow: rgba(69, 137, 255, 0.10);
--ai-popover-bg: var(--cds-white);
--ai-text: var(--cds-blue-70);
--ai-skeleton: rgba(69, 137, 255, 0.20);
}
/* ---------- TEMA OSCURO (Gray 100) ---------- */
[data-theme="dark"] {
--background: var(--cds-gray-100);
--layer-01: var(--cds-gray-90);
--layer-02: var(--cds-gray-80);
--layer-hover: #333333;
--layer-selected: var(--cds-gray-80);
/* g100 tiene dos pasos: layer-accent-01 gray-80, para lo que se apoya en
layer-01, y layer-accent-02 gray-70, para lo que se apoya en layer-02.
Va el segundo porque las tablas y las tarjetas de esta app son layer-02:
con gray-80 la cabecera de la tabla salia del mismo color exacto que su
cuerpo y no se distinguia de el. En claro los dos pasos valen gray-20,
asi que alli esto no mueve nada. */
--layer-accent: var(--cds-gray-70);
--layer-selected-hover: #474747;
--field-01: var(--cds-gray-90);
--field-02: var(--cds-gray-80);
/* Mismo caso. g100 separa border-subtle-01 gray-80, para lo dibujado sobre
layer-01, de border-subtle-02 gray-70, para lo dibujado sobre layer-02.
Este tema aplana los dos en un token, asi que toma el segundo: tarjetas,
tablas, modales, cajones, popovers y barras son todos layer-02, y con
gray-80 la linea salia del color exacto de la superficie que tenia
debajo. Contraste 1.00: no es que se viera poco, es que no estaba. */
--border-subtle: var(--cds-gray-70);
/* El mismo escalon en g100: sobre layer-01 (gray-90) la linea es gray-80. */
--border-subtle-01: var(--cds-gray-80);
--border-strong: var(--cds-gray-60);
--border-interactive: var(--cds-blue-50);
--text-primary: var(--cds-gray-10);
--text-secondary: var(--cds-gray-30);
--text-placeholder: var(--cds-gray-60);
--text-on-color: var(--cds-white);
--text-helper: var(--cds-gray-50);
--text-disabled: var(--cds-gray-70);
--link-primary: var(--cds-blue-40);
--text-error: var(--cds-red-40);
--interactive: var(--cds-blue-50);
/* En g100 el anillo de foco es blanco, no azul. */
--focus: var(--cds-white);
--focus-inverse: var(--cds-blue-60);
--button-primary: var(--cds-blue-60);
--button-primary-hover: #0353e9;
--button-secondary: var(--cds-gray-60);
--button-secondary-hover:#5e5e5e;
--icon-primary: var(--cds-gray-10);
--icon-secondary: var(--cds-gray-30);
/* Estados: sin redefinir heredaban del tema claro, pensado para fondo blanco.
El verde 50 sobre Gray 100 se queda en 4.0:1, por debajo del minimo AA de
4.5:1. Carbon sube un escalon la paleta de estado en oscuro. */
--support-success: var(--cds-green-40);
--support-error: var(--cds-red-50);
--support-warning: var(--cds-yellow-30);
--support-info: var(--cds-blue-50);
/* Tag en oscuro: la formula se invierte respecto al tema claro. Carbon g100
pone el fondo en el paso 70 y la tinta en el 20, para conservar el
contraste sobre gray-100. El gris es la excepcion: 70 sobre 10. */
--tag-background-gray: var(--cds-gray-70);
--tag-color-gray: var(--cds-gray-10);
--tag-background-blue: var(--cds-blue-70);
--tag-color-blue: var(--cds-blue-20);
--tag-background-green: var(--cds-green-70);
--tag-color-green: var(--cds-green-20);
--tag-background-red: var(--cds-red-70);
--tag-color-red: var(--cds-red-20);
--tag-background-purple: var(--cds-purple-70);
--tag-color-purple: var(--cds-purple-20);
--tag-background-magenta: var(--cds-magenta-70);
--tag-color-magenta: var(--cds-magenta-20);
--tag-background-teal: var(--cds-teal-70);
--tag-color-teal: var(--cds-teal-20);
--tag-background-cyan: var(--cds-cyan-70);
--tag-color-cyan: var(--cds-cyan-20);
/* Extension propia, misma inversion. */
--tag-background-warning: var(--cds-orange-70);
--tag-color-warning: var(--cds-orange-20);
--tag-background-caution: var(--cds-yellow-70);
--tag-color-caution: var(--cds-yellow-20);
/* El acento de marca acompana a --interactive, que en oscuro ya sube a
blue-50. Dejarlo en blue-60 partia en dos los acentos de la interfaz:
el borde activo del sidenav se veia mas apagado que sus iconos. */
--brand: var(--cds-blue-50);
--overlay: rgba(0,0,0,.65);
--skeleton-bg: #333333;
--skeleton-shine: #4a4a4a;
--shadow-sm: 0 2px 6px rgba(0,0,0,.4);
--shadow-md: 0 4px 16px rgba(0,0,0,.5);
/* Sidenav en tema oscuro */
--brand-soft: rgba(69,137,255,.16);
--sidenav-bg: var(--cds-gray-100);
--sidenav-active-bg: var(--cds-gray-90);
--sidenav-text: var(--cds-gray-30);
--sidenav-text-strong: var(--cds-gray-10);
--sidenav-hover: var(--cds-gray-90);
--sidenav-border: var(--cds-gray-80);
/* ---------- Notificaciones (oscuro) ----------
Carbon no aclara el fondo en tema oscuro: usa la capa y deja que el borde
y el icono lleven el color de estado. Un tinte pastel sobre fondo negro
seria un parche luminoso y perderia la jerarquia de la pagina. */
--notification-bg-success: var(--cds-gray-80);
--notification-bg-error: var(--cds-gray-80);
--notification-bg-warning: var(--cds-gray-80);
--notification-bg-info: var(--cds-gray-80);
--notification-text-success: var(--cds-gray-10);
--notification-text-error: var(--cds-gray-10);
--notification-text-warning: var(--cds-gray-10);
--notification-text-info: var(--cds-gray-10);
/* ---------- Carbon for AI (oscuro) ----------
Sobre fondo oscuro el resplandor se ve mas, asi que baja de opacidad, y
los bordes suben un escalon de la paleta para mantener el contraste. */
--ai-aura-start: rgba(120, 169, 255, 0.13);
--ai-aura-end: rgba(165, 110, 255, 0);
--ai-border-start: var(--cds-blue-40);
--ai-border-end: var(--cds-purple-50);
--ai-inner-shadow: rgba(120, 169, 255, 0.08);
--ai-popover-bg: var(--cds-gray-90);
--ai-text: var(--cds-blue-40);
--ai-skeleton: rgba(120, 169, 255, 0.16);
}