/** * POS CompraMAS - Design Tokens * Fase 1: Sistema de diseño (colores, tipografía, espaciado) * Fase 4: Sistema de colores + Dark/Light mode * Soporta data-theme="light" | "dark" en * Transiciones: --transition-theme-duration 300ms */ /* ===== LIGHT MODE (default) ===== */ :root, [data-theme="light"] { /* Fondos y superficies */ --color-background: #f5f5f7; --color-background-alt: #ffffff; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-surface-muted: #f0f0f2; /* Primarios - Naranja neon agradable */ --color-primary: #f97316; --color-primary-hover: #ea580c; --color-primary-active: #c2410c; --color-primary-muted: #ffedd5; --color-primary-contrast: #ffffff; /* Secundarios */ --color-secondary: #64748b; --color-secondary-hover: #475569; --color-secondary-active: #334155; --color-secondary-muted: #f1f5f9; /* Texto */ --color-text: #1e293b; --color-text-secondary: #475569; /* #64748b sobre #f5f5f7 ≈ 4.6:1 — pasa WCAG AA */ --color-text-muted: #64748b; --color-text-inverse: #ffffff; /* Bordes */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --color-border-focus: #f97316; /* Estados semánticos */ --color-success: #16a34a; --color-success-contrast: #ffffff; --color-success-muted: #dcfce7; --color-warning: #d97706; --color-warning-contrast: #1c1917; --color-warning-muted: #fef3c7; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-contrast: #ffffff; --color-danger-muted: #fee2e2; --color-info: #0284c7; --color-info-contrast: #ffffff; --color-info-muted: #e0f2fe; /* Header (barra superior) - claro en modo claro */ --color-header-bg: #ffffff; --color-header-text: #1e293b; --color-header-title: #0369a1; --color-header-border: #e2e8f0; --color-header-sep: rgba(0, 0, 0, 0.12); --color-header-hover: rgba(0, 0, 0, 0.06); /* Aliases para compatibilidad con código existente */ --color-bg: var(--color-background); --color-bg-card: var(--color-surface); --color-error: var(--color-danger); --color-primary-dark: var(--color-primary-hover); --color-primary-light: #fdba74; --color-accent: var(--color-warning); /* Estados deshabilitados */ --color-disabled-bg: #f1f5f9; --color-disabled-text: #94a3b8; --color-disabled-border: #e2e8f0; /* Overlays para hover/active en light mode */ --hover-overlay: rgba(0, 0, 0, 0.04); --hover-overlay-strong: rgba(0, 0, 0, 0.08); /* Tabs / botones de sección no seleccionados — más visibles */ --color-tab-inactive-bg: #e2e8f0; --color-tab-inactive-text: #475569; --color-tab-inactive-border: #cbd5e1; } /* ===== DARK MODE — Negro fuerte (true dark) ===== */ [data-theme="dark"] { --color-background: #0a0a0a; --color-background-alt: #141414; --color-surface: #141414; --color-surface-elevated: #1f1f1f; --color-surface-muted: #0a0a0a; --color-primary: #fb923c; --color-primary-hover: #fdba74; --color-primary-active: #fed7aa; --color-primary-muted: #7c2d12; --color-primary-contrast: #0a0a0a; --color-secondary: #a3a3a3; --color-secondary-hover: #d4d4d4; --color-secondary-active: #f5f5f5; --color-secondary-muted: #262626; --color-text: #fafafa; --color-text-secondary: #d4d4d4; --color-text-muted: #a3a3a3; --color-text-inverse: #0a0a0a; --color-border: #262626; --color-border-strong: #404040; --color-border-focus: #fb923c; --color-success: #22c55e; --color-success-contrast: #ffffff; --color-success-muted: #14532d; --color-warning: #f59e0b; --color-warning-contrast: #1c1917; --color-warning-muted: #422006; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-contrast: #ffffff; --color-danger-muted: #450a0a; --color-info: #0ea5e9; --color-info-contrast: #ffffff; --color-info-muted: #0c4a6e; --color-primary-dark: var(--color-primary-hover); --color-primary-light: #fdba74; --color-accent: var(--color-warning); --color-header-bg: #0a0a0a; --color-header-text: #fafafa; --color-header-title: #38bdf8; --color-header-border: #262626; --color-header-sep: rgba(255, 255, 255, 0.2); --color-header-hover: rgba(255, 255, 255, 0.08); /* Estados deshabilitados */ --color-disabled-bg: #1f1f1f; --color-disabled-text: #525252; --color-disabled-border: #262626; /* Overlays para hover/active en dark mode */ --hover-overlay: rgba(255, 255, 255, 0.05); --hover-overlay-strong: rgba(255, 255, 255, 0.1); /* Tabs / botones de sección no seleccionados — más visibles sobre fondo oscuro */ --color-tab-inactive-bg: #262626; --color-tab-inactive-text: #d4d4d4; --color-tab-inactive-border: #404040; } /* ===== TOKENS ESTÁTICOS (independientes del tema) ===== */ :root { /* Tipografía — familias */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; /* Tipografía — tamaños */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Tipografía — interlineado */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Tipografía — pesos (nombres canónicos) */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Aliases de retrocompatibilidad → apuntan a los canónicos */ --font-regular: var(--font-weight-normal); --font-medium: var(--font-weight-medium); --font-semibold: var(--font-weight-semibold); --font-bold: var(--font-weight-bold); /* Iconografía — tamaños estándar */ --icon-sm: 1rem; /* 16px */ --icon-md: 1.25rem; /* 20px - estándar en botones */ --icon-lg: 1.5rem; /* 24px */ /* Espaciado (escala 4px) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* Aliases de espaciado */ --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); /* Bordes — radios */ --radius-sm: 0.25rem; /* 4px - badges */ --radius-md: 0.5rem; /* 8px - inputs, botones */ --radius-lg: 0.75rem; /* 12px - cards, modales */ --radius-xl: 1rem; /* 16px - botón Cobrar */ --radius-full: 9999px; /* pills */ /* Sombras — elevaciones */ --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); /* Alturas de layout */ --app-header-height: 56px; /* Desktop */ --app-header-height-mobile: 48px; /* Mobile (<768px) */ --pos-header-height: 64px; /* Header POS desktop */ /* Transiciones */ --transition-fast: 100ms ease; --transition-base: 200ms ease; --transition-theme-duration: 300ms; --transition-theme-easing: ease-in-out; /* Duraciones y curvas de easing */ --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); } /* ===== Z-INDEX SCALE ===== */ /* 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 */ /* ===== BREAKPOINTS (referencia para media queries) ===== */ /* Mobile: 360-480px (base) */ /* Mobile Large: 481-639px */ /* Mobile Large (wide): 640px — grid-2 columnas en listas */ /* Tablet: 768-1023px */ /* Tablet Large: 900px — menú horizontal → compacto en el header */ /* Desktop: 1024-1279px */ /* Desktop Large: 1280px+ */