/* ─── tokens.css ── el único sitio donde viven los colores.
 *
 * v7 · tema verde. La idea: un verde amable manda, y a partir de él el color
 * se va apagando hasta el blanco, con dos destellos suaves arriba. Así la
 * pantalla deja de ser una hoja en blanco sin volverse un cartel.
 *
 * Dos verdes distintos y no intercambiables:
 *   --brand        verde oscuro, para TEXTO y enlaces sobre fondo claro.
 *   --brand-vivid  verde encendido, para RELLENOS: botones, el +, barras.
 * Mezclarlos deja texto verde claro sobre blanco, que no se lee.
 *
 * --screen es el color propio de cada pantalla (ver app.css, body[data-view]).
 * Tiñe el fondo y los detalles, de modo que Cuentas, Movimientos o Tarjetas se
 * reconocen por el color antes de leer el título.
 */
:root{
  /* ── LA PALETA DE MARCA. Cambiar estas ocho líneas cambia toda la app:
     cabecera, splash, clave, barra, botón +, pantallas de éxito. ── */
  --brand:#334155;        /* texto y enlaces sobre fondo claro */
  --brand-vivid:#475569;  /* rellenos: botones, el +, barras */
  --brand-light:#F0D080;  /* oro: brillos y texto sobre fondo oscuro de marca */
  --brand-pale:#E7D3A0;   /* subtítulos sobre fondo oscuro de marca */
  --brand-deep:#1E293B;   /* fondo profundo: splash, clave, barra del teléfono */
  --brand-deeper:#0F172A; /* el extremo más oscuro del fondo profundo */
  --brand-top:#334155;    /* el extremo más claro del fondo profundo */
  --brand-2:#0F172A; --brand-soft:#E9EDF3; --brand-ink:#0F172A;
  --brand-glow:color-mix(in srgb,var(--brand-vivid) 22%,transparent);

  /* señales: el verde de «entra dinero» se separa del verde de la marca */
  --income:#0F8A52; --expense:#D03A33; --warn:#B4700A; --neutral:#64748B;

  --band:linear-gradient(155deg,var(--brand-vivid) 0%,var(--brand) 45%,var(--brand-deep) 100%); --band-top:var(--brand-vivid);
  --accent:#F2A516; --accent-2:#D97706;

  --radius:16px; --radius-sm:10px; --gap:16px; --touch:48px;

  /* fondo: verde arriba que se deshace en blanco abajo */
  --bg:color-mix(in srgb,var(--brand-vivid) 6%,#FFFFFF); --surface:#FFFFFF; --surface-2:color-mix(in srgb,var(--brand-vivid) 9%,#FFFFFF);
  /* El fondo se arma en body::before (app.css) a partir de --screen y de este
     color base. Tiene que ser allí y no aquí: una variable que usa var() se
     resuelve en el elemento donde se DECLARA, así que si el degradado viviera
     en :root se quedaría con el --screen del html —el verde por defecto— y
     todas las pantallas saldrían iguales. */
  --bg-base:#FFFFFF; --wash-1:32%; --wash-2:20%; --wash-3:15%; --wash-4:6%;

  --text:color-mix(in srgb,var(--brand-deeper) 55%,#000); --muted:color-mix(in srgb,var(--brand-deep) 45%,#6B7280); --line:color-mix(in srgb,var(--brand-vivid) 14%,#E5E7EB);
  --shadow:0 1px 2px color-mix(in srgb,var(--brand-deep) 5%,transparent), 0 10px 26px color-mix(in srgb,var(--brand-deep) 7%,transparent);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* un color por pantalla */
  --screen:var(--brand-vivid); --screen-ink:var(--brand);
  /* color del texto que va encima del verde de marca */
  --on-brand:#FFFFFF;
}

[data-theme="dark"]{
  --brand:var(--brand-light); --brand-2:var(--brand-deeper); --brand-soft:color-mix(in srgb,var(--brand-vivid) 18%,#0B1117); --brand-ink:var(--brand-pale);
  --brand-glow:color-mix(in srgb,var(--brand-vivid) 26%,transparent);

  --income:#34D399; --expense:#F87171; --warn:#E0A33A; --neutral:#94A3B8;

  --band:linear-gradient(155deg,var(--brand-deep) 0%,color-mix(in srgb,var(--brand-deep) 70%,#000) 50%,var(--brand-deeper) 100%); --band-top:var(--brand-deep);
  --accent:#F5B32E; --accent-2:#C87908;

  --bg:color-mix(in srgb,var(--brand-deeper) 30%,#05080B); --surface:color-mix(in srgb,var(--brand-deeper) 45%,#0B1117); --surface-2:color-mix(in srgb,var(--brand-deeper) 60%,#121A22);
  --bg-base:color-mix(in srgb,var(--brand-deeper) 30%,#05080B); --wash-1:20%; --wash-2:12%; --wash-3:11%; --wash-4:4%;

  --text:color-mix(in srgb,var(--brand-pale) 35%,#F3F4F6); --muted:color-mix(in srgb,var(--brand-pale) 35%,#8B95A1); --line:color-mix(in srgb,var(--brand-deep) 55%,#1F2937);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.4);

  --screen:var(--brand-light); --screen-ink:var(--brand-pale);
  /* en oscuro el verde de marca es claro: encima va tinta oscura, no blanca */
  --on-brand:var(--brand-deeper);
}