/*
 * Design tokens — Nalt Tomí (app de compradores).
 *
 * Colores tomados de lo que YA está en producción (app de tiendas/repartidores
 * y la página pública /tarjetas-tomin/), no inventados de nuevo, para que las
 * tres cosas se vean como la misma marca:
 *   --acento (naranja) y --fondo (negro) en app/index.html
 *   jade #00A86B usado en toda la app de tiendas
 *   crema #FBF5E9 usado como fondo neutro en la página de tarjetas Tomín
 *
 * Variantes que no existían antes (jade oscuro/claro, rojo) se calcularon
 * para cumplir contraste WCAG 4.5:1 mínimo en texto normal — ver el
 * comentario de cada una.
 *
 * Reglas de uso (no romper estos pares):
 *   - Naranja NUNCA como texto sobre crema. Naranja va sobre negro, o como
 *     fondo de botón con texto negro encima.
 *   - Texto blanco NUNCA sobre jade base (--nalt-jade). Usa texto negro sobre
 *     jade base, o jade oscuro (--nalt-jade-oscuro) con texto blanco/crema.
 *   - Naranja y jade nunca se tocan directo: sepáralos con negro o crema.
 *   - Rojo de error: siempre con ícono + texto, nunca solo el color.
 */

:root {
  /* Marca */
  --nalt-negro: #0A0A0A;
  --nalt-negro-suave: #1A1714;       /* tarjetas sobre fondo negro, mismo tono cálido */
  --nalt-naranja: #F5821F;           /* 7.55:1 sobre --nalt-negro */
  --nalt-jade: #00A86B;              /* 6.10:1 sobre --nalt-negro; NUNCA texto blanco encima */
  --nalt-jade-oscuro: #00734A;       /* 5.51:1 con texto oscuro sobre crema; 5.91:1 con texto blanco */
  --nalt-jade-claro: #3DDC97;        /* 10.64:1 sobre --nalt-negro, acentos/hover en modo oscuro */
  --nalt-crema: #FBF5E9;
  --nalt-rojo: #E5484D;              /* 5.06:1 sobre --nalt-negro (modo oscuro) */
  --nalt-rojo-oscuro: #B3261E;       /* 5.92:1 sobre --nalt-crema (modo claro) */

  /* Tipografía: del sistema, sin fuentes web (presupuesto de peso) */
  --nalt-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nalt-texto-xs: 0.8125rem;
  --nalt-texto-sm: 0.9375rem;
  --nalt-texto-base: 1.0625rem;   /* un poco más grande que el default: pantallas al sol, gama baja */
  --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: 8px;
  --nalt-radio-md: 12px;
  --nalt-radio-lg: 16px;
  --nalt-radio-pill: 999px;

  /* Botones: mínimo 48px de alto (accesibilidad táctil, sección 2B) */
  --nalt-boton-alto: 48px;

  /* Modo oscuro (predeterminado) */
  --color-fondo: var(--nalt-negro);
  --color-fondo-tarjeta: var(--nalt-negro-suave);
  --color-texto: var(--nalt-crema);
  --color-texto-tenue: #C9C2B8;
  --color-borde: #2A2621;
  --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-rojo);
  --color-peligro-texto: var(--nalt-negro);
}

/* Modo claro: se activa con [data-tema="claro"] en <html>, nunca automático
   por prefers-color-scheme para no sorprender a quien ya conoce la app oscura;
   el botón de "Cambiar a modo claro" en Cuenta cambia este atributo. */
:root[data-tema="claro"] {
  --color-fondo: var(--nalt-crema);
  --color-fondo-tarjeta: #FFFFFF;
  --color-texto: var(--nalt-negro);
  --color-texto-tenue: #5B5346;
  --color-borde: #E7DFD0;
  --color-acento-1: var(--nalt-naranja);   /* sigue siendo fondo de botón, nunca texto suelto */
  --color-acento-1-texto: var(--nalt-negro);
  --color-acento-2: var(--nalt-jade-oscuro);
  --color-acento-2-texto: #FFFFFF;
  --color-peligro: var(--nalt-rojo-oscuro);
  --color-peligro-texto: #FFFFFF;
}