/* =========================================================================== CAELSA BMS — tokens de diseño Fuente normativa: docs/ARQUITECTURA.md §12.2 Tema oscuro por defecto. Tema claro disponible con . El color se reserva para ESTADO, nunca para decorar. =========================================================================== */ :root { /* --- superficies --- */ --fondo-0: #0b0e14; --fondo-1: #11151d; --fondo-2: #171c26; --fondo-3: #1e2530; --borde: #252d3a; --borde-fuerte: #33405260; /* --- texto --- */ --texto-1: #e6edf3; --texto-2: #9aa7b8; --texto-3: #6b7889; /* --- acento e indicadores de estado --- */ --acento: #3b82f6; --acento-suave: #3b82f622; --ok: #22c55e; --aviso: #f59e0b; --error: #ef4444; --critico: #dc2626; --inactivo: #64748b; --anulado: #a855f7; /* mando manual activo sobre el punto */ /* --- tipografía --- */ --fuente: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fuente-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 28px; /* --- geometría --- */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px; --sombra: 0 1px 2px #0006, 0 8px 24px #0004; --transicion: 120ms cubic-bezier(.2, .6, .2, 1); /* --- derivados (no decorativos: sólo densidad y estructura) --- */ --alto-fila: 32px; /* densidad obligatoria de tabla */ --alto-barra: 44px; --ancho-lateral: 224px; --ancho-lateral-min: 52px; --ancho-panel: 300px; /* paneles de propiedades de los editores */ /* fondos tenues por estado — sólo para franjas y chips, nunca para relleno grande */ --ok-suave: #22c55e1f; --aviso-suave: #f59e0b1f; --error-suave: #ef44441f; --critico-suave: #dc26262b; --inactivo-suave: #64748b1f; --anulado-suave: #a855f71f; /* series de gráficas: paleta categórica sobria y distinguible (única excepción al principio "color = estado": identifica series) */ --serie-1: #3b82f6; --serie-2: #14b8a6; --serie-3: #f59e0b; --serie-4: #a855f7; --serie-5: #ef4444; --serie-6: #84cc16; --serie-7: #ec4899; --serie-8: #64748b; /* editor gráfico */ --lienzo-fondo: #0d1117; --lienzo-rejilla: #ffffff0d; --lienzo-rejilla-fuerte: #ffffff1a; --seleccion: var(--acento); --seleccion-suave: var(--acento-suave); color-scheme: dark; } /* --------------------------------------------------------------------------- Tema claro. Mismos nombres de token: ninguna hoja de estilo conoce colores literales fuera de este fichero. --------------------------------------------------------------------------- */ :root[data-tema="claro"] { --fondo-0: #f6f8fa; --fondo-1: #ffffff; --fondo-2: #f0f3f6; --fondo-3: #e6ebf1; --borde: #d3dae2; --borde-fuerte: #9aa7b860; --texto-1: #10161d; --texto-2: #4a5765; --texto-3: #6b7889; --acento: #1f6feb; --acento-suave: #1f6feb1a; --ok: #1a7f37; --aviso: #9a6700; --error: #cf222e; --critico: #a40e26; --inactivo: #6b7889; --anulado: #8250df; --ok-suave: #1a7f3714; --aviso-suave: #9a670014; --error-suave: #cf222e14; --critico-suave: #a40e2620; --inactivo-suave: #6b788914; --anulado-suave: #8250df14; --sombra: 0 1px 2px #0f172a14, 0 8px 24px #0f172a12; --lienzo-fondo: #ffffff; --lienzo-rejilla: #0b0e1410; --lienzo-rejilla-fuerte: #0b0e1420; color-scheme: light; } /* Respeta la preferencia del sistema mientras el usuario no elija tema. */ @media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]):not([data-tema="claro"]) { color-scheme: light; } } /* Accesibilidad: nada se mueve si el usuario lo pide. */ @media (prefers-reduced-motion: reduce) { :root { --transicion: 0ms linear; } }