/* tokens.css — Vocabulario visual de MercadoControl (INV-UI-TOKENS-1). * * ÚNICA fuente de la paleta, los radios, el glow y la escala tipográfica. * Acá NO van reglas de componentes: sólo variables. Quien necesite un color * lo pide por token; está prohibido volver a escribir un hex suelto en un * módulo (era lo que había dejado 171 colores distintos y 18 grises de panel). * * Los neutros llevan un sesgo leve hacia el violeta del acento: un gris puro * se lee como "no elegido", uno sesgado se lee como decidido. * * Se carga ANTES que el resto del CSS propio. Ver docs/layout/layout_SOT.md §6. */ :root { /* ============================================================ Superficies e ink ============================================================ */ --mc-bg: #121216; /* fondo de la app */ --mc-surface: #1a1a20; /* tarjeta, modal, panel */ --mc-surface-2: #22222b; /* hover, input, anidado */ --mc-surface-3: #2a2a33; /* anidado sobre anidado */ --mc-sunken: #131317; /* área hundida DENTRO de una tarjeta */ --mc-sidebar: #16161c; /* barra lateral, un punto bajo el fondo */ --mc-navbar: #1b1b22; /* barra superior */ --mc-line: #2a2a33; /* borde estructural */ --mc-line-soft: rgba(255, 255, 255, 0.10); --mc-line-faint: rgba(255, 255, 255, 0.055); --mc-ink: #eceaf2; /* texto principal */ --mc-ink-soft: #a5a3b0; /* secundario (contraste >= 4.5:1 sobre surface) */ --mc-ink-faint: #6e6c7a; /* deshabilitado, marcas de agua */ /* ============================================================ Acento — UNO SOLO (antes competían #6f42c1, #bb86fc y #8c5aff) ============================================================ */ --mc-accent: #8c5aff; --mc-accent-ink: #cbb6ff; /* texto sobre fondo oscuro */ --mc-accent-soft: rgba(140, 90, 255, 0.28); /* relleno de estado activo */ --mc-accent-line: rgba(140, 90, 255, 0.70); /* borde de estado activo */ --mc-accent-wash: rgba(140, 90, 255, 0.10); /* hover apenas insinuado */ /* Glow: lo que hace que el acento "prenda" en vez de quedar chato. Es una escala, no un valor suelto: había 40 glows improvisados. */ --mc-glow: 0 0 12px rgba(140, 90, 255, 0.22); --mc-glow-strong: 0 0 18px rgba(140, 90, 255, 0.35); /* ============================================================ Semánticos — significan un DATO, no decoración. Nunca se mezclan con el acento ni se reemplazan por él. ============================================================ */ --mc-ok: #22c55e; --mc-warn: #fbbf24; --mc-bad: #f43f5e; --mc-info: #38bdf8; --mc-info-line: rgba(56, 189, 248, 0.55); /* riel de canal (venta manual) */ --mc-info-wash: rgba(56, 189, 248, 0.07); /* tinte de fila de canal */ --mc-warn-line: rgba(251, 191, 36, 0.55); /* riel de atención (contra-signo) */ --mc-warn-wash: rgba(251, 191, 36, 0.07); /* tinte de fila de atención */ --mc-glow-ok: 0 0 12px rgba(34, 197, 94, 0.35); --mc-glow-warn: 0 0 12px rgba(251, 191, 36, 0.35); --mc-glow-bad: 0 0 12px rgba(244, 63, 94, 0.35); /* Violetas que NO son el acento: codifican un dato y por eso se mantienen distinguibles de la selección. Antes eran hex sueltos. cat-full → "Full / comprometido / otros" (era #6f42c1) tier-top → mejor tramo de margen, >=54% (la clase .bg-purple, que estaba definida DOS veces con colores distintos: #6f42c1 global y #7c3aed en Publicaciones) */ --mc-cat-full: #6f42c1; --mc-cat-full-ink: #b085f5; --mc-cat-full-soft: rgba(111, 66, 193, 0.18); --mc-cat-full-line: rgba(111, 66, 193, 0.33); --mc-tier-top: #7c3aed; /* ============================================================ Paleta de DATOS — series de gráfico y categorías. ============================================================ Los semánticos de arriba NO sirven para esto, y está medido: --mc-ok (L 0.723), --mc-warn (0.837) y --mc-info (0.754) caen FUERA de la banda de luminosidad de una marca sobre fondo oscuro (0.48–0.67) y gritan al lado de cualquier serie; peor, --mc-bad contra el naranja de dato da ΔE 9.3 en visión normal, por debajo del piso de 15 — no se distinguen ni con visión plena. De ahí la regla: DENTRO DE UN GRÁFICO, TODO ES SERIE. El semántico significa estado y vive en un badge, una alerta o un borde; en un canvas se usan estos slots. El ORDEN es parte del entregable: se asigna por entidad, del 1 en adelante, y NUNCA se cicla ni se reordena. Magenta pegado a aqua, por ejemplo, da ΔE 1.6 en deuteranopía. Validado como conjunto: banda de luminosidad, piso de croma, separación CVD, visión normal (peor par adyacente ΔE 19.3) y contraste ≥3:1 sobre --mc-surface. LÍMITE: los tres primeros slots aguantan TODOS los pares (scatter, burbujas). De ahí en más sólo pares adyacentes (barras, líneas, apilados); con más series, la identidad la tiene que dar la etiqueta, nunca el color solo. Cómo revalidar si se toca alguno: docs/layout/layout_RUNBOOK.md §5. ============================================================ */ --mc-data-1: #d95926; /* naranja */ --mc-data-2: #199e70; /* aqua */ --mc-data-3: #3987e5; /* azul */ --mc-data-4: #d55181; /* magenta */ --mc-data-5: #c98500; /* ámbar */ --mc-data-6: #008300; /* verde */ --mc-data-7: #9085e9; /* violeta */ --mc-data-8: #e66767; /* teja */ /* Conceptos del capital: el color ES la identidad del concepto y se repite en el gráfico, en la tabla de deudas y en las fichas de Tesorería. Estaba tipeado en cuatro archivos, con dos conceptos compartiendo el mismo naranja. La asignación concepto → slot vive ACÁ y en ningún otro lado: el HTML pide var(--mc-cap-*) y el canvas TokenColor.get('--mc-cap-*'). */ --mc-cap-logistics: var(--mc-data-1); /* deuda logística */ --mc-cap-transit: var(--mc-data-2); /* mercadería en tránsito */ --mc-cap-ars: var(--mc-data-3); /* cuentas en pesos */ --mc-cap-taxes: var(--mc-data-4); /* deuda impositiva */ --mc-cap-flex: var(--mc-data-5); /* deuda Flex */ --mc-cap-supplier: var(--mc-data-6); /* deuda con proveedores */ /* "Otras deudas (compras)" es un concepto PROPIO: comparte pantalla con proveedores en la ficha de Tesorería —se veían las dos del mismo verde—, así que lleva su slot. Reusa el azul de cuentas en pesos: los dos sólo coinciden en el gráfico de 14 series, donde una suma y la otra resta y la leyenda las separa. Es parte del límite anotado abajo. */ --mc-cap-other: var(--mc-data-3); --mc-cap-stock: var(--mc-data-7); /* valor del stock */ --mc-cap-investor: var(--mc-data-8); /* deuda con inversores */ /* ============================================================ Radios — el radio dice si algo se toca o si algo contiene. Las reglas que los aplican viven en shapes.css (tanda 2). ============================================================ */ --mc-radius-pill: 999px; /* se toca y lleva texto */ --mc-radius-box: 16px; /* contiene: tarjeta, modal, menú */ --mc-radius-box-sm: 12px; /* campos */ /* ============================================================ Tipografía — misma familia del sistema, lo que cambia es peso, tracking y escala. Las reglas viven en typography.css. ============================================================ */ --mc-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Tahoma, Geneva, Verdana, sans-serif; /* Monoespaciada del sistema: montos y números que cambian en vivo (la landing la usa para que un contador no "baile" de ancho). */ --mc-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --mc-title: 1.75rem; --mc-title-weight: 640; --mc-title-tracking: -0.02em; --mc-h2: 1.3rem; --mc-h3: 1.1rem; --mc-eyebrow: 0.72rem; --mc-eyebrow-tracking: 0.12em; /* ============================================================ Puentes de compatibilidad. Los nombres viejos siguen existiendo pero ya no tienen valor propio: apuntan acá. Por eso .card, .modal, .table, .form-control y .dropdown-menu adoptan la paleta nueva sin tocar layout.css. ============================================================ */ --bg-dark: var(--mc-bg); --bg-card: var(--mc-surface); --bg-card-hover: var(--mc-surface-2); --text-primary: var(--mc-ink); --text-secondary: var(--mc-ink-soft); --accent-color: var(--mc-accent); --border-color: var(--mc-line); --input-bg: var(--mc-surface-2); --input-border: #3a3a45; /* Bootstrap: sólo fondo, texto y bordes. Los colores de acción (primary / info) NO se tocan acá — es otra decisión. */ --bs-body-bg: var(--mc-bg); --bs-body-color: var(--mc-ink); --bs-border-color: var(--mc-line); --bs-secondary-color: var(--mc-ink-soft); --bs-emphasis-color: #ffffff; /* Fondo "secundario" de Bootstrap: lo consumen los estados disabled (paginación, inputs sin re-skin propio). Sin pisarlo, un botón deshabilitado cae al gris casi blanco de light mode (#e9ecef). */ --bs-secondary-bg: var(--mc-surface-2); }