/* ============================================================ TurboPOS — Tokens de diseño v2 (dirección 2a/2b: Modo Día / Modo Noche) Contrastes verificados contra WCAG 2.2 nivel AA (ver spec adjunta). Uso: o . Reemplaza gradualmente los tokens de app/static/css/design-system.css ============================================================ */ :root, [data-theme="dia"] { /* Fondos y superficies */ --tp-bg: #fbf6ec; /* papel cálido, no blanco puro */ --tp-surface: #ffffff; /* tarjetas */ --tp-surface-2: #f1ede3; /* bandas suaves, barras de gráfico inactivas */ --tp-visor: #241f16; /* "visor" oscuro de caja dentro del modo día */ --tp-visor-ink: #fbf6ec; /* Texto */ --tp-ink: #241f16; /* 13.9:1 sobre --tp-bg → AAA */ --tp-muted: rgba(36, 31, 22, 0.62); /* ≈4.6:1 sobre blanco → AA texto normal */ /* Bordes */ --tp-border: rgba(36, 31, 22, 0.12); --tp-border-strong: rgba(36, 31, 22, 0.18); /* Marca (amarillo TurboPOS, se mantiene) */ --tp-brand: #ffc107; /* solo como RELLENO, nunca texto sobre claro */ --tp-brand-deep: #e0960a; /* extremo inferior de gradientes de botón */ --tp-brand-text: #8a5b00; /* amarillo "texto" accesible: 5.8:1 sobre blanco → AA */ --tp-on-brand: #1a1400; /* texto sobre botón amarillo: 10.7:1 → AAA */ --tp-brand-soft: #fff2cc; /* chips/badges; usar con --tp-brand-text */ /* Estados */ --tp-success: #1f7a3d; /* 4.7:1 sobre --tp-success-bg → AA */ --tp-success-bg: #e6f4ea; --tp-success-border: #b8e0c2; --tp-danger: #b3261e; /* 6.7:1 sobre blanco → AA */ --tp-danger-bg: #fdecea; /* Foco (siempre visible, WCAG 2.4.7) */ --tp-ring: #8a5b00; --tp-ring-offset: 2px; } [data-theme="noche"] { --tp-bg: #17140f; /* negro cálido (café), no negro azulado */ --tp-surface: #211c15; --tp-surface-2: #2b251c; --tp-visor: #0c0a07; --tp-visor-ink: #fbf6ec; --tp-ink: #fbf6ec; /* ≈16:1 sobre --tp-bg → AAA */ --tp-muted: rgba(251, 246, 236, 0.66); /* ≈7:1 → AA/AAA */ --tp-border: rgba(255, 247, 230, 0.12); --tp-border-strong: rgba(255, 247, 230, 0.2); --tp-brand: #ffc107; /* 11.9:1 sobre --tp-bg: en noche SÍ sirve como texto */ --tp-brand-deep: #c98f00; --tp-brand-text: #ffdf85; /* variante clara para chips sobre oscuro */ --tp-on-brand: #1a1400; --tp-brand-soft: rgba(255, 193, 7, 0.16); --tp-success: #7ed9a0; --tp-success-bg: rgba(31, 122, 61, 0.22); --tp-success-border: rgba(126, 217, 160, 0.4); --tp-danger: #ffb4a9; --tp-danger-bg: rgba(179, 38, 30, 0.24); --tp-ring: #ffc107; --tp-ring-offset: 2px; } :root { /* Tipografía (D-006 se mantiene: Comfortaa + monospace en cifras) */ --tp-font-display: 'Comfortaa', sans-serif; /* wordmark + titulares */ --tp-font-ui: 'Plus Jakarta Sans', sans-serif; /* interfaz y cuerpo */ --tp-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* toda cifra CLP */ /* Escala mínima "para todo público" */ --tp-text-base: 1rem; /* 16px mínimo absoluto en UI operativa */ --tp-text-lg: 1.0625rem; /* 17px cuerpo cómodo */ --tp-tap-min: 48px; /* alto mínimo de botón/tile (WCAG 2.5.8+) */ --tp-radius-sm: 10px; --tp-radius-md: 12px; --tp-radius-lg: 16px; } /* Foco visible universal */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--tp-ring); outline-offset: var(--tp-ring-offset); } /* Respeto a usuarios con sensibilidad al movimiento (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }