/* ========================================================================= ESSENCELAB ERP — DESIGN TOKENS Fuente única de verdad para color, tipografía, espaciado, radios, sombras, movimiento y breakpoints. REGLAS 1. Ningún componente define un color, radio o duración literal. Si necesitas un valor que no está aquí, se añade aquí primero. 2. Todos los pares texto/fondo de esta paleta cumplen WCAG AA (>=4.5:1). Verificado con scripts/check-contrast.js — no cambiar un color sin volver a correrlo. 3. Espaciado sobre rejilla de 4px. No hay valores impares. Dirección: oscuro neutro + oro como SEÑAL (acción primaria, estado activo, foco), nunca como decoración. Elevación por borde y escalón de fondo, no por sombra. ========================================================================= */ :root { /* ── SUPERFICIES ─────────────────────────────────────────────────────── Escalera de 5 pasos. La elevación se lee por el escalón de fondo y el borde, no por sombras — por eso los pasos son cortos y regulares. */ --surface-canvas: #0a0a0a; /* fondo de la app */ --surface-base: #111111; /* tarjetas, sidebar, topbar */ --surface-raised: #171717; /* inputs, celdas anidadas, thead */ --surface-hover: #1e1e1e; /* hover de fila / item */ --surface-active: #262626; /* pressed / seleccionado */ /* ── BORDES ── */ --border-subtle: #1f1f1f; /* separadores internos (filas de tabla) */ --border-default: #2a2a2a; /* borde de tarjeta, input, botón */ --border-strong: #3d3d3d; /* hover de borde, divisores marcados */ /* ── TEXTO — todos AA sobre surface-base y surface-raised ── */ --text-primary: #ededed; /* 16.1:1 — títulos, valores, datos */ --text-secondary: #a3a3a3; /* 7.5:1 — cuerpo secundario, labels */ --text-tertiary: #8a8a8a; /* 5.5:1 — metadatos, th, placeholders. Es el suelo: por debajo se falla AA. */ --text-on-accent: #0a0a0a; /* 10.0:1 sobre --accent */ --text-inverse: #1a1a1a; /* sobre superficies claras (factura PDF) */ /* ── ACENTO (oro de marca) ──────────────────────────────────────────── Un solo oro con tres funciones. Sin degradados, sin glow, sin hairlines decorativos: si algo es oro, es accionable o está activo. */ --accent: #d9b45f; /* 9.6:1 — acción primaria, activo, foco */ --accent-hover: #e6c478; /* hover del botón primario */ --accent-pressed: #c39f4a; --accent-subtle: rgba(217, 180, 95, 0.10); /* fondo de estado activo */ --accent-muted: rgba(217, 180, 95, 0.28); /* borde de estado activo */ /* ── SEMÁNTICOS — texto AA sobre cualquier superficie ── */ --success: #4ec98a; /* 9.0:1 */ --danger: #f2726b; /* 6.7:1 */ --warning: #e8a13c; /* 8.6:1 */ --info: #61a5f5; /* 7.4:1 */ /* Fondos y bordes de badge — el color de texto va aparte para no bajar nunca del ratio AA. */ --success-bg: rgba(78, 201, 138, 0.12); --success-border: rgba(78, 201, 138, 0.26); --danger-bg: rgba(242, 114, 107, 0.12); --danger-border: rgba(242, 114, 107, 0.26); --warning-bg: rgba(232, 161, 60, 0.12); --warning-border: rgba(232, 161, 60, 0.26); --info-bg: rgba(97, 165, 245, 0.12); --info-border: rgba(97, 165, 245, 0.26); --neutral-bg: rgba(163, 163, 163, 0.10); --neutral-border: rgba(163, 163, 163, 0.22); /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────── Una sola familia. El serif (Cormorant) y la tercera familia (Space Grotesk) se retiran: los numerales tabulares de Inter cubren el caso de las cifras y se ahorran dos descargas de fuente. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Escala de 8 pasos. Cualquier tamaño fuera de esta lista es un bug. */ --fs-micro: 0.6875rem; /* 11px — labels en versalitas, kbd */ --fs-xs: 0.75rem; /* 12px — metadatos, celdas densas */ --fs-sm: 0.8125rem; /* 13px — cuerpo de tabla, botones */ --fs-md: 0.875rem; /* 14px — cuerpo por defecto */ --fs-lg: 1rem; /* 16px — título de tarjeta */ --fs-xl: 1.25rem; /* 20px — título de modal, topbar */ --fs-2xl: 1.5rem; /* 24px — valor de KPI */ --fs-3xl: 1.75rem; /* 28px — título de página */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; /* titulares, valores de KPI */ --lh-snug: 1.4; /* celdas de tabla, UI densa */ --lh-normal: 1.6; /* párrafos */ --tracking-label: 0.08em; /* versalitas. Antes había 0.06/0.08/0.1/0.12/ 0.14/0.18/0.22/0.35em — ahora una sola. */ /* ── ESPACIADO — rejilla de 4px ── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ /* ── RADIOS ── */ --r-xs: 4px; /* checkbox, kbd, chip pequeño */ --r-sm: 6px; /* botón pequeño, badge cuadrado */ --r-md: 8px; /* botón, input, nav item */ --r-lg: 12px; /* tarjeta, modal, panel */ --r-xl: 16px; /* barra flotante */ --r-full: 999px; /* pill, avatar */ /* ── SOMBRAS — solo dos niveles, ambos para capas flotantes ── Las tarjetas NO llevan sombra: se separan por borde y fondo. */ --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.65); /* ── FOCO ───────────────────────────────────────────────────────────── Un único anillo para toda la app. 9.6:1 contra cualquier superficie, muy por encima del 3:1 que exige AA para indicadores no textuales. Se aplica siempre con :focus-visible para no molestar al ratón. */ --focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--accent); --focus-ring-inset: inset 0 0 0 2px var(--accent); /* ── MOVIMIENTO ─────────────────────────────────────────────────────── Sin rebote. Solo opacity y transform. */ --dur-fast: 120ms; --dur-base: 160ms; --dur-slow: 240ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); --t-fast: var(--dur-fast) var(--ease); --t-base: var(--dur-base) var(--ease); /* ── LAYOUT ── */ --sidebar-w: 248px; --topbar-h: 56px; --content-max: 1600px; /* Altura de control unificada. Antes: btn-icon 34, toggle 38, modal-close 30, dash-qa-btn ~30 — cuatro tamaños para lo mismo. */ --control-h: 36px; --control-h-sm: 28px; --control-h-lg: 44px; /* mínimo táctil WCAG 2.5.5 */ /* ── BREAKPOINTS (referencia — @media no acepta var()) ── sm 480px móvil pequeño md 768px móvil / tablet vertical lg 1024px tablet — el sidebar pasa a drawer por debajo xl 1280px escritorio 2xl 1600px ancho máximo de contenido */ } /* ========================================================================= ALIAS DE COMPATIBILIDAD `js/views.js`, `js/modals.js` y `js/app.js` referencian los nombres antiguos desde 317 atributos style="" inline. En vez de tocar 317 sitios a mano (y arriesgar la lógica de negocio), los nombres viejos se redefinen apuntando a los tokens nuevos. Efecto inmediato: los 99 usos de --text-muted que fallaban AA (2.28:1) pasan a 5.5:1 sin editar una sola línea de JS. Estos alias se van retirando conforme cada pantalla se migra. No añadir alias nuevos. ========================================================================= */ :root { --bg-primary: var(--surface-canvas); --bg-secondary: var(--surface-raised); --bg-card: var(--surface-base); --bg-hover: var(--surface-hover); --bg-input: var(--surface-raised); --border: var(--border-default); --border-light: var(--border-strong); --gold: var(--accent); --gold-light: var(--accent-hover); --gold-dark: var(--accent-pressed); --gold-glow: var(--accent-subtle); --gold-glow-lg: var(--accent-muted); --white: #ffffff; /* --text-primary y --text-secondary ya son tokens del sistema nuevo y se llaman igual que los antiguos: NO se re-declaran aquí. Escribir `--text-secondary: var(--text-secondary)` crea una referencia cíclica que, según la spec de Custom Properties, deja la propiedad como "invalid at computed-value time" — es decir, vacía. El síntoma es sutil: todo lo que la usa hereda el color del padre en vez de fallar visible. */ --text-muted: var(--text-tertiary); /* 2.28:1 -> 5.5:1 */ --success-light: var(--success); --warning-light: var(--warning); --danger-light: var(--danger); --info-light: var(--info); --sidebar-width: var(--sidebar-w); --header-height: var(--topbar-h); --radius-sm: var(--r-xs); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --shadow-sm: var(--shadow-popover); --shadow-md: var(--shadow-popover); --shadow-lg: var(--shadow-overlay); --transition: var(--t-base); --transition-slow: var(--dur-slow) var(--ease); --transition-bounce: var(--t-base); /* el rebote se retira */ } /* `--success` y `--danger` se usaban como colores OSCUROS de relleno (bordes de kanban, botón borrar) y ahora son los claros de texto. Los antiguos valores de relleno pasan a nombres explícitos para que ningún componente los confunda con texto legible. */ :root { --fill-success: #1f4a35; --fill-danger: #5c2020; --fill-warning: #7a4c1c; --fill-info: #1e3c56; }