/* * ============================================================================= * FICHAS DE DISEÑO — Sistema visual 1.0 de Bendetti Inventory * ============================================================================= * * Única fuente de verdad del tema. Ninguna vista escribe un color literal: * usa var(--...). El tema vive en , que fija un * script en ANTES del primer pintado (ver index.html y core/theme.js): * "Sistema" sigue al sistema operativo; "Claro" y "Oscuro" lo fuerzan. * * Personalidad: instrumento de precisión / libro contable moderno. El acento * es MORADO y sólo marca acción primaria, foco y selección: nunca fondo de * ambiente, degradado ni brillo. * * Sin alias: los nombres viejos (--color-primary, --color-in…) se eliminaron * en el reset visual; ninguna hoja ni vista los usa (una prueba lo vigila). * * CONTRASTE (medido, WCAG): todo texto ≥ 4.5:1 sobre bg, surface, surface-2, * hover y accent-soft en ambos temas (el más justo: text-3 sobre accent-soft * claro, 4.54). Blanco sobre accent: 5.37. Límites de controles * (--border-control) y --danger-border ≥ 3:1 sobre surface, bg y surface-2. * El foco es --accent sólido. Ver docs/12-sistema-visual.md. * ============================================================================= */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #F5F4F0; --surface: #FFFFFF; --surface-2: #EFEEE9; --hover: #F7F6F2; --border: #E3E1DA; --border-strong: #CFCCC3; /* Límite de controles interactivos (inputs, selects, checkboxes, borde del secundario): ≥ 3:1 (WCAG 1.4.11). --border sigue siendo decorativo. */ --border-control: #8C8981; --text: #18181B; --text-2: #55545C; --text-3: #6B6A72; --accent: #6A47FB; --accent-text: #5231DE; --accent-soft: #EEEAFE; --ok: #1B6E45; --info: #1F56A8; --warn: #9A4F00; --danger: #B42318; --danger-border: #C8564A; /* Texto sobre el acento (botón primario) y velo de los diálogos. */ --on-accent: #FFFFFF; --backdrop: rgb(24 24 27 / 45%); /* Velo de hojas y popovers en móvil (tapan casi toda la pantalla). */ --scrim-sheet: rgb(24 24 27 / 50%); --shadow-sm: 0 1px 2px rgb(24 24 27 / 6%); --shadow: 0 4px 12px rgb(24 24 27 / 8%); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0F0F11; --surface: #161618; --surface-2: #1C1C1F; --hover: #1C1C20; --border: #27272C; --border-strong: #36363D; --border-control: #6B6A73; --text: #EDEDEF; --text-2: #A9A8B1; --text-3: #8D8C96; --accent: #6A47FB; --accent-text: #B3A1FF; --accent-soft: #241D45; --ok: #62C48C; --info: #7FB0F2; --warn: #F0A847; --danger: #F28B80; --danger-border: #B8534A; --on-accent: #FFFFFF; --backdrop: rgb(0 0 0 / 60%); --scrim-sheet: rgb(0 0 0 / 78%); --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --shadow: 0 4px 12px rgb(0 0 0 / 45%); } /* Sin JavaScript (el script de no corrió): el tema del sistema. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0F0F11; --surface: #161618; --surface-2: #1C1C1F; --hover: #1C1C20; --border: #27272C; --border-strong: #36363D; --border-control: #6B6A73; --text: #EDEDEF; --text-2: #A9A8B1; --text-3: #8D8C96; --accent: #6A47FB; --accent-text: #B3A1FF; --accent-soft: #241D45; --ok: #62C48C; --info: #7FB0F2; --warn: #F0A847; --danger: #F28B80; --danger-border: #B8534A; --backdrop: rgb(0 0 0 / 60%); --scrim-sheet: rgb(0 0 0 / 78%); --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%); --shadow: 0 4px 12px rgb(0 0 0 / 45%); } } :root { /* --- Tipografía ----------------------------------------------------- */ --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* TODAS las cifras (precios, stock, montos, SKU, referencias, fechas, horas) en DM Mono con cifras tabulares: alinean en columna y un 1 no se confunde con un 7 de un vistazo. */ --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; /* Serif editorial: título y marca de Entrar y Elegir negocio. Aún no hay una serif aprobada en assets/fonts: Georgia, provisional, como pide la guía de esas pantallas (sin fuentes remotas ni de pago). */ --font-serif: Georgia, "Times New Roman", serif; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.125rem; --text-xl: 1.5rem; /* --- Espacio y forma ----------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --radius: 8px; --radius-lg: 12px; /* Mínimo cómodo para tocar con el dedo o pulsar con prisa. */ --touch-target: 44px; /* --- Movimiento: 4 niveles, una curva, sin rebotes ------------------ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Todo lo repetitivo (carrito, escanear, seleccionar filas): sólo color. */ --dur-instant: 80ms; /* Desplegables, pestañas, tooltips, avisos. Nada que se repita pasa de aquí (≤ 200 ms). */ --dur-fast: 160ms; /* Diálogos y paneles laterales. */ --dur-deliberate: 280ms; /* Sólo el resultado del cierre de caja. */ --dur-ceremonial: 600ms; } /* Auth route tokens: isolated from the application shell. */ body.page-auth { --bg: #F7F6F2; --surface: #FDFCFA; --surface-2: #ECEAE4; --text: #252722; --text-2: #656960; --border: #DDDCD5; --border-control: #84887E; --accent-text: #6240D8; --auth-focus: #6A47FB; --auth-selection: #625079; --ok: #26734A; --danger: #9E3939; --font-sans: Arial, Helvetica, sans-serif; } :root[data-theme="dark"] body.page-auth { --bg: #171917; --surface: #202420; --surface-2: #2B312A; --text: #EAE9E2; --text-2: #A5ABA1; --border: #41473E; --border-control: #737D6C; --accent-text: #B5A0FF; --auth-focus: #9A82FF; --auth-selection: #B6A5CF; --ok: #71B58C; --danger: #E99A90; }