/** * Design system — tokens de color y tipografía * data-theme="light" | "dark" en * * Reglas de negocio (UX): * - Semántica (--ds-*): MISMA en claro y oscuro (no se redefine por tema). * - Solo cambian fondos, superficies, bordes y texto por tema. * - Primary (#F97316): CTAs principales (ej. confirmar venta). * - Success (#22C55E): dinero, totales, estados positivos. * - Danger (#EF4444): errores, destructivo. * - Warning (#FACC15): alertas. * - Info (#0095FF): navegación, secundario, enlaces — azul luminoso tipo “eléctrico” sobre oscuro. * * Modo oscuro: fondo #000000; superficies y neutros refinados (menos brillo en texto, * bordes con pasos más claros). Primary/hover surface plegables a #111 / #1A1A1A. * * EJEMPLOS DE USO (solo CSS; copiar selectores al estilar módulos): * - POS — total a cobrar / cambio: .pos-total { color: var(--color-success); } * - Inventario — stock bajo: color: var(--color-warning); sin stock: var(--color-danger); * - Reportes — ingreso: var(--color-success); gasto: var(--color-danger); * - Navegación activa / tabs informativos: var(--color-info) o .btn-secondary (info). */ @layer design-tokens { /* ===== PALETA SEMÁNTICA CANÓNICA (inmutable entre temas; únicos hex de marca aquí) ===== */ :root { --ds-primary: #f97316; --ds-primary-hover: #ea580c; --ds-primary-active: #c2410c; --ds-success: #22c55e; --ds-success-hover: color-mix(in srgb, var(--ds-success) 85%, #000000); --ds-danger: #ef4444; --ds-danger-hover: #dc2626; --ds-warning: #facc15; --ds-info: #0095ff; --ds-info-hover: color-mix(in srgb, var(--ds-info) 88%, #000000); --ds-on-primary: #ffffff; --ds-on-success: #ffffff; --ds-on-danger: #ffffff; --ds-on-info: #ffffff; /* Texto sobre superficies warning (amarillo) */ --ds-on-warning: #1a1a1a; /* Marca terceros (WhatsApp): fija */ --ds-whatsapp: #25d366; --ds-whatsapp-hover: #20bd5a; } /* ===== MODO CLARO — neutros más suaves: mejor jerarquía y menos sensación “clínica” ===== */ :root, [data-theme="light"] { --color-background: #f4f5f8; --color-background-alt: #fdfdfd; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-surface-muted: #eceef3; --color-surface-hover: #e4e8ef; /* Mapa a semántica fija */ --color-primary: var(--ds-primary); --color-primary-hover: var(--ds-primary-hover); --color-primary-active: var(--ds-primary-active); --color-primary-contrast: var(--ds-on-primary); --color-primary-muted: color-mix(in srgb, var(--ds-primary) 16%, var(--color-surface)); --color-primary-light: color-mix(in srgb, var(--ds-primary) 40%, var(--color-surface)); --color-success: var(--ds-success); --color-success-hover: var(--ds-success-hover); --color-success-contrast: var(--ds-on-success); --color-success-muted: color-mix(in srgb, var(--ds-success) 15%, var(--color-surface)); --color-success-on-muted: color-mix(in srgb, var(--ds-success) 52%, #0f172a); --color-danger: var(--ds-danger); --color-danger-hover: var(--ds-danger-hover); --color-danger-contrast: var(--ds-on-danger); --color-danger-muted: color-mix(in srgb, var(--ds-danger) 13%, var(--color-surface)); --color-danger-on-muted: color-mix(in srgb, var(--ds-danger) 46%, #0f172a); --color-warning: var(--ds-warning); --color-warning-contrast: var(--ds-on-warning); --color-warning-muted: color-mix(in srgb, var(--ds-warning) 24%, var(--color-surface)); --color-warning-fg: color-mix(in srgb, var(--ds-warning) 36%, #422006); --color-info: var(--ds-info); --color-info-hover: var(--ds-info-hover); --color-info-contrast: var(--ds-on-info); --color-info-muted: color-mix(in srgb, var(--ds-info) 13%, var(--color-surface)); --color-info-on-muted: color-mix(in srgb, var(--ds-info) 50%, #0f172a); /* Neutros UI (etiquetas, chrome) */ --color-secondary: #5d6b82; --color-secondary-hover: #45556d; --color-secondary-active: #334155; --color-secondary-muted: #e8ecf2; --color-text: #161d2c; --color-text-secondary: #3e4c5f; --color-text-muted: #5d6b7f; --color-text-disabled: #8a95a8; --color-text-inverse: #ffffff; --color-muted-foreground: var(--color-text-muted); --color-border: #dee3ec; --color-border-strong: #c4ccd8; --color-border-subtle: #eff1f6; --color-border-focus: var(--ds-primary); --color-header-bg: #ffffff; --color-header-text: var(--color-text); --color-header-title: var(--ds-info); --color-header-border: #e4e9f0; --color-header-sep: rgba(15, 23, 42, 0.1); --color-header-hover: rgba(15, 23, 42, 0.05); --color-disabled-bg: #eef1f6; --color-disabled-text: #8a95a8; --color-disabled-border: #dee3ec; --hover-overlay: rgba(15, 23, 42, 0.04); --hover-overlay-strong: rgba(15, 23, 42, 0.085); --color-tab-inactive-bg: #e2e7f0; --color-tab-inactive-text: #3e4c5f; --color-tab-inactive-border: #c4ccd8; --color-overlay-scrim: rgba(10, 15, 25, 0.48); --color-focus-ring: var(--ds-primary); /* Aliases legados */ --color-bg: var(--color-background); --color-bg-card: var(--color-surface); --color-bg-muted: var(--color-surface-muted); --color-bg-hover: var(--color-surface-hover); --color-error: var(--color-danger); --color-primary-dark: var(--color-primary-hover); --color-accent: var(--color-warning); --color-brand-whatsapp: var(--ds-whatsapp); --color-brand-whatsapp-hover: var(--ds-whatsapp-hover); } /* ===== MODO OSCURO — #000 base; texto menos blanco puro; bordes y muted con más matices ===== */ [data-theme="dark"] { --color-background: #000000; --color-background-alt: #000000; --color-surface: #111111; --color-surface-elevated: #1a1a1a; /* Cabeceras de tabla / bandas: distinto de la card para lectura en bloque */ --color-surface-muted: #141414; --color-surface-hover: #1a1a1a; --color-primary: var(--ds-primary); --color-primary-hover: var(--ds-primary-hover); --color-primary-active: var(--ds-primary-active); --color-primary-contrast: var(--ds-on-primary); --color-primary-muted: color-mix(in srgb, var(--ds-primary) 20%, var(--color-surface)); --color-primary-light: color-mix(in srgb, var(--ds-primary) 36%, var(--color-surface)); --color-success: var(--ds-success); --color-success-hover: var(--ds-success-hover); --color-success-contrast: var(--ds-on-success); --color-success-muted: color-mix(in srgb, var(--ds-success) 15%, var(--color-surface)); --color-success-on-muted: color-mix(in srgb, var(--ds-success) 68%, #d1fae5); --color-danger: var(--ds-danger); --color-danger-hover: var(--ds-danger-hover); --color-danger-contrast: var(--ds-on-danger); --color-danger-muted: color-mix(in srgb, var(--ds-danger) 17%, var(--color-surface)); --color-danger-on-muted: color-mix(in srgb, var(--ds-danger) 65%, #fecaca); --color-warning: var(--ds-warning); --color-warning-contrast: var(--ds-on-warning); --color-warning-muted: color-mix(in srgb, var(--ds-warning) 20%, var(--color-surface)); --color-warning-fg: color-mix(in srgb, var(--ds-warning) 65%, #3f2e0a); --color-info: var(--ds-info); --color-info-hover: var(--ds-info-hover); --color-info-contrast: var(--ds-on-info); --color-info-muted: color-mix(in srgb, var(--ds-info) 18%, var(--color-surface)); --color-info-on-muted: color-mix(in srgb, var(--ds-info) 70%, #dbeafe); --color-secondary: #9ca3af; --color-secondary-hover: #c4c9d4; --color-secondary-active: #e5e7eb; --color-secondary-muted: #242424; --color-text: #e8eaed; --color-text-secondary: #b8bec9; --color-text-muted: #8b919d; --color-text-disabled: #5c616d; --color-text-inverse: #0d0d0d; --color-muted-foreground: var(--color-text-muted); --color-border: #2a2b30; --color-border-strong: #3f4149; --color-border-subtle: #1a1a1c; --color-border-focus: var(--ds-primary); --color-header-bg: #000000; --color-header-text: #e8eaed; --color-header-title: var(--ds-info); --color-header-border: #2a2b30; --color-header-sep: rgba(255, 255, 255, 0.12); --color-header-hover: rgba(255, 255, 255, 0.07); --color-disabled-bg: #181818; --color-disabled-text: #5c616d; --color-disabled-border: #2a2b30; --hover-overlay: rgba(255, 255, 255, 0.048); --hover-overlay-strong: rgba(255, 255, 255, 0.1); --color-tab-inactive-bg: #2a2b30; --color-tab-inactive-text: #b8bec9; --color-tab-inactive-border: #3f4149; --color-overlay-scrim: rgba(0, 0, 0, 0.58); --color-focus-ring: var(--ds-primary); --color-bg: var(--color-background); --color-bg-card: var(--color-surface); --color-bg-muted: var(--color-surface-muted); --color-bg-hover: var(--color-surface-hover); --color-error: var(--color-danger); --color-primary-dark: var(--color-primary-hover); --color-accent: var(--color-warning); --color-brand-whatsapp: var(--ds-whatsapp); --color-brand-whatsapp-hover: var(--ds-whatsapp-hover); } /* Superficie sutil (thumbs, previews): mezcla neutra */ :root { --color-surface-subtle: color-mix(in srgb, var(--color-text) 5%, var(--color-surface)); } [data-theme="dark"] { --color-surface-subtle: color-mix(in srgb, var(--color-text) 8%, var(--color-surface)); } /* ===== TOKENS NO-COLOR (tipografía, espacio, sombras…) ===== */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-regular: var(--font-weight-normal); --font-medium: var(--font-weight-medium); --font-semibold: var(--font-weight-semibold); --font-bold: var(--font-weight-bold); --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; --elevation-0: none; --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08); --elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --elevation-3: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.08); --elevation-4: 0 20px 40px -10px rgba(0, 0, 0, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --app-header-height: 56px; --app-header-height-mobile: 48px; --pos-header-height: 64px; --transition-fast: 100ms ease; --transition-base: 200ms ease; --transition-theme-duration: 300ms; --transition-theme-easing: ease-in-out; --duration-instant: 50ms; --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --duration-slower: 400ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Tabs financiera (activo = primary CTA de sección) */ :root, [data-theme="light"], [data-theme="dark"] { --financiera-tab-active-bg: var(--color-primary); --financiera-tab-active-hover: var(--color-primary-hover); } } /* ===== Z-INDEX SCALE (referencia) ===== */ /* Dropdowns / tooltips : 100 Connection status : 150 Sidebar backdrop : 199 Sidebar (overlay) : 200 Sidebar hamburger : 201 Context menu (POS) : 250 Confirm dialog : 300 Modal cobro (POS) : 300 Recibo overlay (POS) : 310 Toast container : 400 */