/* * Design tokens — Tianquiztli (app de clientes). * * BASE DE DISEÑO OFICIAL (compartida con Tlanamacak, Titlaniliztli y el sitio * de comida de Tlacualligo; ver docs/DESIGN_GUIDE.md). Cualquier pantalla o * botón nuevo parte de estas variables: nunca hex sueltos en componentes. * * Tema: OSCURO por defecto, con modo claro. El botón luna/sol vive dentro de * la navegación (junto a Mensajes). Se guarda en localStorage ("nalt-tema") * y se aplica con data-tema="oscuro" | "claro" en (ver script al inicio * del de index.html, para que no haya parpadeo). * * Los nombres de las variables NO cambian respecto al diseño anterior * (--nalt-*, --color-*): solo cambian sus valores, así base.css e index.html * siguen funcionando sin tocar cada regla. * * Reglas de uso (no romper estos pares): * - Texto negro (--color-acento-1-texto / --nalt-negro) sobre botones * naranja o jade. Nunca texto blanco sobre jade base. * - Los textos de acento (precios, enlaces) usan --nalt-naranja-texto y * --nalt-jade-texto: se oscurecen en modo claro para pasar contraste AA. * - Rosa: siempre con ícono + texto, nunca solo el color. * - Superficies SIEMPRE oscuras (cabeceras, nav superior, tarjeta de saldo) * usan los tokens --nalt-*-oscur* / --nalt-sobre-oscuro, que no cambian * con el tema. */ :root { /* ---- Marca (fijos, no dependen del tema) ---- */ --nalt-negro: #0A0A0A; /* texto sobre naranja/jade, fondo oscuro */ --nalt-negro-suave: #141312; /* alias: superficie oscura */ --nalt-fondo-login: #0A0A0A; /* Login/Registro: mismo fondo oscuro */ --nalt-naranja: #F5821F; /* cempasúchil — acción principal */ --nalt-naranja-petalo: #FFC46B; /* pétalos internos de la flor */ --nalt-naranja-texto: #A65500; /* naranja como TEXTO sobre fondo claro (AA) */ --nalt-jade: #00A86B; --nalt-jade-profundo: #007A4F; /* jade para fondos con texto blanco (tarjetas) */ --nalt-jade-oscuro: #0A5A4A; --nalt-jade-texto: #0A5A4A; /* jade como TEXTO sobre fondo claro (AA) */ --nalt-jade-claro: #DCEFE8; /* fondo jade claro (chips/banners) */ --nalt-jade-sobre-oscuro: #00A86B; /* jade legible sobre fondo oscuro */ --nalt-rosa: #C2185B; /* alertas / quitar / falta saldo */ --nalt-rosa-claro: #F8D3E1; --nalt-rosa-sobre-oscuro: #E0467C; --nalt-dorado: #F5C451; /* secundario / CTA de saldo */ --nalt-crema: #F6F1E8; /* fondo del modo claro */ /* ---- Superficies siempre oscuras (cabeceras, nav superior, saldo) ---- */ --nalt-fondo-oscuro: #0A0A0A; --nalt-superficie-oscura: #141312; --nalt-superficie-2-oscura: #1E1B18; --nalt-borde-oscuro: #2A2622; --nalt-sobre-oscuro: #F2EFEA; /* texto sobre superficie oscura */ --nalt-suave-sobre-oscuro: #A39E97; /* texto suave sobre superficie oscura */ /* ---- Tipografía autohospedada (ver fonts/fonts.css) ---- Young Serif (peso 400) para títulos, precios y montos; Figtree para el resto. */ --nalt-fuente: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --nalt-fuente-titulo: 'Young Serif', Georgia, 'Times New Roman', serif; --nalt-texto-2xs: 0.68rem; --nalt-texto-xs: 0.8125rem; --nalt-texto-sm: 0.9375rem; --nalt-texto-base: 1rem; --nalt-texto-lg: 1.25rem; --nalt-texto-xl: 1.75rem; --nalt-texto-xxl: 2.25rem; /* ---- Espaciado ---- */ --nalt-espacio-1: 4px; --nalt-espacio-2: 8px; --nalt-espacio-3: 12px; --nalt-espacio-4: 16px; --nalt-espacio-5: 24px; --nalt-espacio-6: 32px; /* ---- Radios ---- */ --nalt-radio-sm: 12px; --nalt-radio-md: 16px; --nalt-radio-lg: 18px; --nalt-radio-xl: 22px; --nalt-radio-xxl: 24px; --nalt-radio-pill: 999px; /* Curva de salida fuerte para toda la UI (el `ease` integrado es débil). */ --nalt-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Botones principales 54–58px de alto (objetivo táctil ≥ 44px siempre) */ --nalt-boton-alto: 56px; /* ---- TEMA CLARO (se activa con data-tema="claro") ---- */ --color-fondo: var(--nalt-crema); --color-fondo-tarjeta: #FFFFFF; --color-superficie-2: #EFE7D8; --color-texto: #17130F; --color-texto-tenue: #5F574D; --color-borde: #DDD3C2; --color-acento-1: var(--nalt-naranja); /* botón principal */ --color-acento-1-texto: var(--nalt-negro); --color-acento-2: var(--nalt-jade); /* botón secundario / confirmación */ --color-acento-2-texto: var(--nalt-negro); --color-peligro: var(--nalt-rosa); --color-peligro-texto: #FFFFFF; --nalt-sombra-tarjeta: 0 1px 0 rgba(23,19,15,.08), 0 8px 20px -14px rgba(23,19,15,.35); } /* ---- TEMA OSCURO (por defecto: lo aplica el script del ) ---- Se declara también sobre :root sin atributo para que, si el script no corriera, la app siga viéndose oscura. */ :root[data-tema="oscuro"], :root:not([data-tema]) { --color-fondo: #0A0A0A; --color-fondo-tarjeta: #141312; --color-superficie-2: #1E1B18; --color-texto: #F2EFEA; --color-texto-tenue: #A39E97; --color-borde: #2A2622; --color-acento-1: var(--nalt-naranja); --color-acento-1-texto: var(--nalt-negro); --color-acento-2: var(--nalt-jade); --color-acento-2-texto: var(--nalt-negro); --color-peligro: var(--nalt-rosa-sobre-oscuro); --color-peligro-texto: var(--nalt-negro); --nalt-sombra-tarjeta: 0 10px 24px -8px rgba(0,0,0,.6); /* Sobre fondo oscuro el naranja y el jade brillantes sí tienen contraste de sobra — las variantes apagadas son solo para fondo claro. */ --nalt-naranja-texto: var(--nalt-naranja); --nalt-jade-texto: var(--nalt-jade); } /* Login y Registro: siempre oscuros, pase lo que pase con el interruptor de tema (el selector por id es más específico que [data-tema]). */ #pantalla-login, #pantalla-registro { --color-fondo: var(--nalt-fondo-oscuro); --color-fondo-tarjeta: var(--nalt-superficie-oscura); --color-superficie-2: var(--nalt-superficie-2-oscura); --color-texto: var(--nalt-sobre-oscuro); --color-texto-tenue: var(--nalt-suave-sobre-oscuro); --color-borde: var(--nalt-borde-oscuro); --color-acento-1: var(--nalt-naranja); --color-acento-1-texto: var(--nalt-negro); --color-acento-2: var(--nalt-jade); --color-acento-2-texto: var(--nalt-negro); --color-peligro: var(--nalt-rosa-sobre-oscuro); --color-peligro-texto: var(--nalt-negro); --nalt-sombra-tarjeta: 0 10px 24px -8px rgba(0,0,0,.6); --nalt-naranja-texto: var(--nalt-naranja); --nalt-jade-texto: var(--nalt-jade); }