/* tokens.css — Charly v3
 * Variables de diseño compartidas por todas las pantallas.
 * Fuente: docs/gestor-gastos-research/DESIGN_TOKENS.md
 */
:root {
  /* === Marca: azul Charly + acentos del coin === */
  --charly-primary:        #3E51B5;
  --charly-primary-light:  #6074D7;
  --charly-primary-soft:   #E8EAF6;
  --charly-accent-orange:  #FF6600;
  --charly-accent-yellow:  #FDC02C;

  /* === Superficies === */
  --bg-base:        #F4F1E5;
  --bg-card:        #FFFFFF;
  --bg-header:      #3E51B5;

  /* === Texto === */
  --text-primary:   #1A1A2E;
  --text-secondary: #6B7280;
  --text-on-primary:#FFFFFF;
  --text-muted:     #9CA3AF;

  /* === Bordes y separadores === */
  --border-soft:    rgba(26,26,46,0.08);
  --shadow-card:    0 2px 8px rgba(26,26,46,0.06);

  /* === Categorías (mantener iguales a la app referencia) === */
  --cat-salud:        #E14B4B;
  --cat-ocio:         #3FB5A4;
  --cat-casa:         #FF7A30;
  --cat-cafe:         #A06FCE;
  --cat-educacion:    #3F8FE0;
  --cat-regalos:      #E04F8F;
  --cat-alimentacion: #5DA84F;
  --cat-transporte:   #4A6FBF;
  --cat-servicios:    #8B5CF6;
  --cat-suscripciones:#6366F1;
  --cat-impuestos:    #DC2626;
  --cat-supermercado: #84CC16;
  --cat-honorarios:   #10B981;
  --cat-otros:        #9CA3AF;

  /* === Estados === */
  --state-success: #10B981;
  --state-warning: #F59E0B;
  --state-danger:  #EF4444;

  /* === Tipografía === */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* === Sizing === */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 28px;
  --radius-header-bottom: 32px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;

  --fab-size: 56px;
}

/* Reset mínimo + body con fuente y fondo base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }

/* Helpers de color de categoría reutilizables: <span class="cat-color" data-cat="alimentacion"> */
[data-cat="alimentacion"]    { --cat-color: var(--cat-alimentacion); }
[data-cat="supermercado"]    { --cat-color: var(--cat-supermercado); }
[data-cat="kiosco"]          { --cat-color: var(--cat-cafe); }
[data-cat="restaurant"]      { --cat-color: var(--cat-cafe); }
[data-cat="delivery"]        { --cat-color: var(--cat-alimentacion); }
[data-cat="bebidas"]         { --cat-color: var(--cat-cafe); }
[data-cat="transporte"]      { --cat-color: var(--cat-transporte); }
[data-cat="automovil"]       { --cat-color: var(--cat-casa); }
[data-cat="combustible"]     { --cat-color: var(--cat-casa); }
[data-cat="hogar"]           { --cat-color: var(--cat-casa); }
[data-cat="electrodomesticos"] { --cat-color: var(--cat-casa); }
[data-cat="servicios"]       { --cat-color: var(--cat-servicios); }
[data-cat="consorcios"]      { --cat-color: var(--cat-servicios); }
[data-cat="telefonia"]       { --cat-color: var(--cat-suscripciones); }
[data-cat="suscripciones"]   { --cat-color: var(--cat-suscripciones); }
[data-cat="seguros"]         { --cat-color: var(--cat-suscripciones); }
[data-cat="salud"]           { --cat-color: var(--cat-salud); }
[data-cat="farmacia"]        { --cat-color: var(--cat-salud); }
[data-cat="gimnasio"]        { --cat-color: var(--cat-ocio); }
[data-cat="ocio"]            { --cat-color: var(--cat-ocio); }
[data-cat="peluqueria"]      { --cat-color: var(--cat-cafe); }
[data-cat="educacion"]       { --cat-color: var(--cat-educacion); }
[data-cat="libreria"]        { --cat-color: var(--cat-educacion); }
[data-cat="oficina"]         { --cat-color: var(--cat-educacion); }
[data-cat="trabajo"]         { --cat-color: var(--cat-honorarios); }
[data-cat="honorarios"]      { --cat-color: var(--cat-honorarios); }
[data-cat="inversion"]       { --cat-color: var(--cat-honorarios); }
[data-cat="mascotas"]        { --cat-color: var(--cat-alimentacion); }
[data-cat="ropa"]            { --cat-color: var(--cat-regalos); }
[data-cat="regalos"]         { --cat-color: var(--cat-regalos); }
[data-cat="deudas"]          { --cat-color: var(--cat-impuestos); }
[data-cat="impuestos"]       { --cat-color: var(--cat-impuestos); }
[data-cat="varios"]          { --cat-color: var(--cat-otros); }
[data-cat="otros"]           { --cat-color: var(--cat-otros); }