/* * tokens.css — los únicos colores, radios y tipografías del sistema. * * Diseño "Shadcn Claro (Zinc)", aprobado por el dueño el 07/08/2026. La muestra * exacta es project-docs/design/REFERENCIA-VISUAL.html; la especificación, * project-docs/docs/DESIGN-SYSTEM.md. * * REGLA: ninguna pantalla define colores propios. Si hace falta un color nuevo, * se agrega acá y se usa por variable. Un `#hex` suelto en una pantalla es un bug: * rompe el tema oscuro sin que nadie se entere hasta que alguien lo prueba. * * El tema se resuelve en tres niveles, de menor a mayor prioridad: * 1. claro por defecto (es la identidad de este diseño); * 2. `prefers-color-scheme: dark` si el sistema del usuario pide oscuro; * 3. `data-theme` en , que es la elección explícita y siempre gana. */ :root { /* Superficies y líneas */ --bg: #fafafa; --card: #ffffff; --bd: #e4e4e7; --bd2: #d4d4d8; /* Fondo de hover y de estados sutiles (ítem activo, chips). */ --soft: #f4f4f5; /* Texto */ --ink: #09090b; --mut: #71717a; --mut2: #a1a1aa; /* Primario: el negro de shadcn. */ --pri: #18181b; --pri-ink: #ffffff; /* Azul de datos, enlaces y foco. NUNCA se usa para estados semánticos. */ --acc: #2563eb; --acc-soft: #eff6ff; /* Semántica. Los estados usan SOLO estos tres. */ --ok: #16a34a; --ok-bg: #f0fdf4; --ok-bd: #bbf7d0; --bad: #dc2626; --bad-bg: #fef2f2; --bad-bd: #fecaca; --warn: #d97706; --warn-bg: #fffbeb; --warn-bd: #fde68a; /* * Los dos canales que no son ni el acento ni un estado: mostrador (teal) y * mayorista (violeta). Van como token porque los usan los chips de vendedor, que * viven dentro de tablas normales y tienen que seguir el tema. */ --tpv: #0d9488; --tpv-bg: #f0fdfa; --may: #7c3aed; --may-bg: #f5f3ff; /* * Texto secundario SOBRE los degradés azules del hero y las cabeceras de * sucursal. No cambia con el tema porque el degradé tampoco: es un hex fijo. * #dbeafe y no #bfdbfe para llegar a 4,6:1 en los tamaños de 11-13px que se usan. */ --on-accent: #dbeafe; /* * Paleta de datos para gráficos con varias series. El orden importa: es el que * se recorre al asignar color por serie. */ --d1: #2563eb; --d2: #0ea5e9; --d3: #8b5cf6; --d4: #f59e0b; --d5: #a1a1aa; --r-sm: 8px; --r: 10px; --r-lg: 12px; --shadow: 0 1px 2px rgb(9 9 11 / 4%); --font: Inter, ui-sans-serif, -apple-system, 'Segoe UI', sans-serif; } /* * Tema oscuro: la variante zinc del spec. No es el tema oscuro anterior — los * tokens viejos quedaron sin uso al migrar. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #09090b; --card: #101013; --bd: #232326; --bd2: #2e2e33; --soft: #1a1a1e; --ink: #fafafa; --mut: #a1a1aa; --mut2: #6b6b74; --pri: #fafafa; --pri-ink: #09090b; --acc: #60a5fa; --acc-soft: #172033; --ok: #4ade80; --ok-bg: rgb(74 222 128 / 12%); --ok-bd: transparent; --bad: #f87171; --bad-bg: rgb(248 113 113 / 12%); --bad-bd: transparent; --warn: #fbbf24; --warn-bg: rgb(251 191 36 / 12%); --warn-bd: transparent; --tpv: #2dd4bf; --tpv-bg: rgb(45 212 191 / 12%); --may: #a78bfa; --may-bg: rgb(167 139 250 / 12%); --on-accent: #dbeafe; /* Series algo más claras: sobre fondo oscuro las originales se apagan. */ --d1: #60a5fa; --d2: #38bdf8; --d3: #a78bfa; --d4: #fbbf24; --d5: #71717a; } } :root[data-theme='light'] { --bg: #fafafa; --card: #ffffff; --bd: #e4e4e7; --bd2: #d4d4d8; --soft: #f4f4f5; --ink: #09090b; --mut: #71717a; --mut2: #a1a1aa; --pri: #18181b; --pri-ink: #ffffff; --acc: #2563eb; --acc-soft: #eff6ff; --ok: #16a34a; --ok-bg: #f0fdf4; --ok-bd: #bbf7d0; --bad: #dc2626; --bad-bg: #fef2f2; --bad-bd: #fecaca; --warn: #d97706; --warn-bg: #fffbeb; --warn-bd: #fde68a; /* * Los dos canales que no son ni el acento ni un estado: mostrador (teal) y * mayorista (violeta). Van como token porque los usan los chips de vendedor, que * viven dentro de tablas normales y tienen que seguir el tema. */ --tpv: #0d9488; --tpv-bg: #f0fdfa; --may: #7c3aed; --may-bg: #f5f3ff; /* * Texto secundario SOBRE los degradés azules del hero y las cabeceras de * sucursal. No cambia con el tema porque el degradé tampoco: es un hex fijo. * #dbeafe y no #bfdbfe para llegar a 4,6:1 en los tamaños de 11-13px que se usan. */ --on-accent: #dbeafe; --d1: #2563eb; --d2: #0ea5e9; --d3: #8b5cf6; --d4: #f59e0b; --d5: #a1a1aa; } :root[data-theme='dark'] { --bg: #09090b; --card: #101013; --bd: #232326; --bd2: #2e2e33; --soft: #1a1a1e; --ink: #fafafa; --mut: #a1a1aa; --mut2: #6b6b74; --pri: #fafafa; --pri-ink: #09090b; --acc: #60a5fa; --acc-soft: #172033; --ok: #4ade80; --ok-bg: rgb(74 222 128 / 12%); --ok-bd: transparent; --bad: #f87171; --bad-bg: rgb(248 113 113 / 12%); --bad-bd: transparent; --warn: #fbbf24; --warn-bg: rgb(251 191 36 / 12%); --warn-bd: transparent; /* Canales, en su variante oscura (ver el bloque claro). */ --tpv: #2dd4bf; --tpv-bg: rgb(45 212 191 / 12%); --may: #a78bfa; --may-bg: rgb(167 139 250 / 12%); --on-accent: #dbeafe; --d1: #60a5fa; --d2: #38bdf8; --d3: #a78bfa; --d4: #fbbf24; --d5: #71717a; }