/*
 * Design tokens — Nalt Tomí (app de compradores).
 *
 * Rediseño visual "Tianquiztli" (ver prompt-claude-code-rediseno-tianquiztli.md
 * y design/*.dc.html, fuente de verdad del diseño). Reemplaza la paleta
 * anterior por la de ese diseño. Las variables SE LLAMAN IGUAL que antes
 * (--nalt-naranja, --color-fondo, etc.) para que base.css e index.html
 * sigan funcionando sin que haya que tocar cada regla una por una.
 *
 * Esquema de tema: el diseño nuevo trae Login/Registro siempre oscuros
 * (fijo, con sus propias variables más abajo, nunca cambia). El resto de la
 * app (Catálogo, Carrito, Perfil, Saldo, etc.) es claro por default, pero
 * a pedido del dueño se conserva el interruptor claro/oscuro que ya existía
 * antes de este rediseño — ahora sí conectado a un botón real (el sol/luna
 * flotante, ver index.html #btn-tema), en vez de quedar sin usar. Se guarda
 * en localStorage y se aplica con [data-tema="oscuro"] en <html>.
 * Login/Registro usan selectores por id (más específicos que [data-tema]),
 * así que el interruptor nunca los toca — siguen oscuros pase lo que pase.
 *
 * Reglas de uso (no romper estos pares):
 *   - Naranja NUNCA como texto suelto sobre el fondo claro de compra; sí
 *     sobre negro/oscuro, o como fondo de botón con texto oscuro encima.
 *   - Texto blanco NUNCA sobre jade base (--nalt-jade). Usa texto oscuro
 *     sobre jade base, o jade oscuro (--nalt-jade-oscuro) con texto blanco.
 *   - Rosa: siempre con ícono + texto, nunca solo el color (alertas/quitar).
 */

:root {
  /* Marca — paleta Tianquiztli (sección 4 del prompt de rediseño) */
  --nalt-negro: #17130F;                /* tinta / cabeceras oscuras */
  --nalt-negro-suave: #17130F;          /* alias: tarjetas/cabeceras oscuras */
  --nalt-fondo-login: #0B0A09;          /* fondo fijo de Login/Registro */
  --nalt-naranja: #F58A07;              /* cempasúchil — acción principal */
  --nalt-naranja-petalo: #FFC46B;       /* pétalos internos de la flor */
  /* Naranja NUNCA como texto suelto sobre el fondo claro de compra (regla
     de la sección 4 del rediseño) — esta variante más oscura es la que se
     usa como texto/precio sobre blanco o crema; el --nalt-naranja de arriba
     sigue siendo el de fondos de botón y el de textos sobre oscuro
     (Login/Registro), donde sí tiene contraste de sobra. */
  --nalt-naranja-texto: #B85F00;
  --nalt-jade: #0E7C66;
  --nalt-jade-oscuro: #0A5A4A;
  --nalt-jade-claro: #DCEFE8;           /* fondo jade claro (chips/banners) */
  --nalt-jade-sobre-oscuro: #5FD3B5;    /* jade legible sobre fondo oscuro */
  --nalt-rosa: #C2185B;                 /* alertas / quitar / falta saldo */
  --nalt-rosa-claro: #F8D3E1;
  --nalt-rosa-sobre-oscuro: #FF8FB8;
  --nalt-dorado: #F5C451;               /* secundario / CTA de saldo */
  --nalt-crema: #F2F5F1;                /* fondo claro, pantallas de compra */

  /* Tipografía autohospedada (ver fonts/fonts.css):
     Bricolage Grotesque para títulos/precios/números, Figtree para el resto. */
  --nalt-fuente: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nalt-fuente-titulo: 'Bricolage Grotesque', var(--nalt-fuente);
  --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 (sección 4: 12 / 16 / 18 / 22 / 24) */
  --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 */
  --nalt-boton-alto: 56px;

  /* Tema claro (default): pantallas de compra (Catálogo, Producto, Tienda,
     Carrito, Perfil, Saldo). */
  --color-fondo: var(--nalt-crema);
  --color-fondo-tarjeta: #FFFFFF;
  --color-texto: #17130F;
  --color-texto-tenue: #5B544B;
  --color-borde: rgba(23, 19, 15, 0.12);
  --color-acento-1: var(--nalt-naranja);   /* botón principal */
  --color-acento-1-texto: #17130F;
  --color-acento-2: var(--nalt-jade-oscuro); /* botón secundario / confirmación */
  --color-acento-2-texto: #FFFFFF;
  --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);
}

/* Login y Registro: fondo oscuro fijo (no depende de ningún interruptor,
   ver nota de arriba). Las mismas variables, solo que resueltas distinto
   dentro de este contenedor — cualquier componente que ya use var(--color-*)
   se adapta solo, sin reglas nuevas. */
#pantalla-login, #pantalla-registro {
  --color-fondo: var(--nalt-fondo-login);
  --color-fondo-tarjeta: #17130F;
  --color-texto: #E6E0D5;
  --color-texto-tenue: #B8B0A3;
  --color-borde: #3A342C;
  --color-acento-1: var(--nalt-naranja);
  --color-acento-1-texto: #17130F;
  --color-acento-2: var(--nalt-dorado);
  --color-acento-2-texto: #17130F;
  --color-peligro: var(--nalt-rosa-sobre-oscuro);
  --color-peligro-texto: #17130F;
  --nalt-sombra-tarjeta: 0 10px 24px -8px rgba(0,0,0,.6);
}

/* Modo oscuro del resto de la app (todo menos Login/Registro, ver nota de
   arriba) — mismo lenguaje de color que ya se usa en Login/Registro, para
   que no se sienta como una app distinta al cambiar. */
:root[data-tema="oscuro"] {
  --color-fondo: var(--nalt-negro);
  --color-fondo-tarjeta: #1F1A14;
  --color-texto: #E6E0D5;
  --color-texto-tenue: #B8B0A3;
  --color-borde: #3A342C;
  --color-acento-1: var(--nalt-naranja);
  --color-acento-1-texto: #17130F;
  --color-acento-2: var(--nalt-dorado);
  --color-acento-2-texto: #17130F;
  --color-peligro: var(--nalt-rosa-sobre-oscuro);
  --color-peligro-texto: #17130F;
  --nalt-sombra-tarjeta: 0 10px 24px -8px rgba(0,0,0,.6);
  /* Sobre fondo oscuro el naranja brillante sí tiene contraste de sobra —
     la variante apagada (--nalt-naranja-texto) es solo para fondo claro. */
  --nalt-naranja-texto: var(--nalt-naranja);
}