/* ========================================================================== Don Esquite POS — TOKENS Un solo lugar para color, tipografía, espaciado, sombras y motion. Cambiar la marca = cambiar --hue-brand (o usar ). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { /* ---------- Tipografía ---------- */ --font-display: 'Outfit', 'Segoe UI Variable Display', -apple-system, sans-serif; --font-body: 'Plus Jakarta Sans', 'Segoe UI Variable Text', -apple-system, sans-serif; --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-md: 0.875rem; /* 14px */ --text-base:0.9375rem; /* 15px */ --text-lg: 1.0625rem; /* 17px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: 2.125rem; /* 34px */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --tracking-tight: -0.018em; --tracking-caps: 0.08em; /* ---------- Marca ---------- */ /* Morado de la referencia. Para el tema maíz: */ --hue-brand: 252; --sat-brand: 94%; --brand: hsl(var(--hue-brand) var(--sat-brand) 67%); --brand-hover: hsl(var(--hue-brand) var(--sat-brand) 61%); --brand-press: hsl(var(--hue-brand) var(--sat-brand) 55%); --brand-soft: hsl(var(--hue-brand) 100% 96%); --brand-softer: hsl(var(--hue-brand) 100% 98%); --brand-text: hsl(var(--hue-brand) 70% 52%); --on-brand: #ffffff; /* ---------- Superficies (iOS light) ---------- */ --surface-0: #eef0f4; /* fondo de la app */ --surface-1: #ffffff; /* paneles y tarjetas */ --surface-2: #f5f6f8; /* zonas hundidas / hover suave */ --surface-3: #e8eaef; /* separadores fuertes */ --hairline: rgba(60, 60, 67, 0.10); --hairline-strong: rgba(60, 60, 67, 0.18); /* ---------- Texto (escala iOS) ---------- */ --text-primary: #1c1c1e; --text-secondary: #5b5b60; --text-muted: #8e8e93; --text-faint: #aeaeb2; /* ---------- Semánticos ---------- */ --success: #12a150; --success-soft: #e6f6ed; --warning: #e8a01b; --warning-soft: #fdf3e0; --error: #eb4d3d; --error-soft: #fdeceb; --info: #2f7de1; --info-soft: #e8f1fd; /* ---------- Acentos del logo (Don Esquite) ---------- */ --maiz: #f5b81c; --hoja: #4aa84f; --sombrero: #e04a3f; /* ---------- Radios (iOS = generosos) ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px; /* ---------- Espaciado (base 4px) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---------- Sombras difuminadas, sin bordes duros ---------- */ --sh-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --sh-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --sh-md: 0 4px 14px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.04); --sh-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 4px 10px rgba(16, 24, 40, 0.05); --sh-xl: 0 28px 70px rgba(16, 24, 40, 0.20), 0 10px 24px rgba(16, 24, 40, 0.10); --sh-brand: 0 8px 22px hsl(var(--hue-brand) var(--sat-brand) 60% / 0.34); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ---------- Barras de scroll ---------- */ --scroll-size: 11px; /* ancho del carril (el pulgar va más angosto) */ --scroll-inset: 3px; /* aire alrededor del pulgar */ --scroll-thumb: rgba(60, 60, 67, 0.26); --scroll-thumb-hover: rgba(60, 60, 67, 0.48); --scroll-fade: 18px; /* alto del degradado en los bordes */ /* ---------- Glassmorphism (modales) ---------- */ /* 0.78 dejaba la hoja del modal a 78% de blanco SOBRE el velo oscuro del fondo: en modo claro el resultado era gris sucio, con el texto negro encima y al lado de paneles blancos. En oscuro no se notaba porque el color de la hoja y lo de atrás son los dos oscuros. Casi opaco conserva el matiz de vidrio sin que la hoja deje de leerse como tarjeta. */ --glass-bg: rgba(255, 255, 255, 0.96); --glass-brd: rgba(255, 255, 255, 0.65); --glass-blur: saturate(180%) blur(28px); --scrim: rgba(12, 14, 22, 0.42); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --t-fast: 140ms; --t-normal: 240ms; --t-slow: 380ms; /* ---------- Layout ---------- */ --col-nav: 212px; /* rail de grupos + lista de categorías */ --col-cart: 380px; /* carrito */ --rail: 58px; /* ancho del rail de iconos */ --topbar: 56px; --swipe-ancho: 92px; /* ancho del botón "Eliminar" que se revela al deslizar */ --z-modal: 900; --z-toast: 1000; --z-overlay: 1100; } /* ========================================================================== TEMA "MAÍZ" — la paleta real del logo (negro + maíz + hoja) Activar con: ========================================================================== */ :root[data-brand="maiz"] { --hue-brand: 40; --sat-brand: 92%; --brand: hsl(40 92% 52%); --brand-hover: hsl(40 92% 47%); --brand-press: hsl(40 92% 42%); --brand-soft: hsl(40 100% 94%); --brand-softer:hsl(40 100% 97%); --brand-text: hsl(32 85% 38%); --on-brand: #241704; /* texto oscuro: el amarillo no contrasta con blanco */ --sh-brand: 0 8px 22px hsl(40 92% 50% / 0.38); } /* ========================================================================== MODO OSCURO — el sistema anterior era "app móvil nativa" oscura. Activar con: (o automático por sistema) ========================================================================== */ :root[data-theme="dark"] { --surface-0: #0e0f13; --surface-1: #1a1c22; --surface-2: #23262e; --surface-3: #2e323c; --hairline: rgba(255, 255, 255, 0.08); --hairline-strong: rgba(255, 255, 255, 0.14); --text-primary: #f2f3f5; --text-secondary: #b6bac4; --text-muted: #878c98; --text-faint: #636874; --brand: hsl(var(--hue-brand) var(--sat-brand) 70%); --brand-hover: hsl(var(--hue-brand) var(--sat-brand) 76%); --brand-press: hsl(var(--hue-brand) var(--sat-brand) 64%); --brand-soft: hsl(var(--hue-brand) 40% 22%); --brand-softer:hsl(var(--hue-brand) 36% 17%); --brand-text: hsl(var(--hue-brand) 90% 78%); --success-soft: #10301f; --warning-soft: #33270d; --error-soft: #3a1a17; --info-soft: #10233b; --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --sh-md: 0 4px 14px rgba(0, 0, 0, 0.5); --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --sh-xl: 0 28px 70px rgba(0, 0, 0, 0.7); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); --glass-bg: rgba(30, 32, 40, 0.8); --glass-brd: rgba(255, 255, 255, 0.10); --scrim: rgba(0, 0, 0, 0.62); --scroll-thumb: rgba(255, 255, 255, 0.20); --scroll-thumb-hover: rgba(255, 255, 255, 0.40); } :root[data-theme="dark"][data-brand="maiz"] { --on-brand: #1a1103; }