:root {
  /* ---- Superficie base ---- */
  --bg: #0a0a0c;
  --bg-elevated: #131316;
  --card: #17171b;
  --card-alt: #1e1e23;
  --border: #2a2a30;

  /* ---- Texto ---- */
  --text: #f5f5f0;
  --text-muted: #9a9aa4;
  --text-dim: #616168;

  /* ---- Color por significado (bloques saturados, estilo tipo la referencia) ---- */
  --gasto: #ff4d3d;
  --gasto-soft: #3a1712;
  --ingreso: #35d488;
  --ingreso-soft: #0f2e21;
  --ahorro: #8b6bff;
  --ahorro-soft: #221a3f;
  --inversion: #4da3ff;
  --inversion-soft: #142a42;
  --presupuesto: #ffc94d;
  --presupuesto-soft: #3a2c0d;
  --vivienda: #4da3ff;
  --salud: #ff6bb3;
  --salud-soft: #3a1428;
  --hogar: #ffa64d;
  --hogar-soft: #3a230d;
  --mascota: #6bd4d4;
  --mascota-soft: #10302f;
  --transporte: #4da3ff;
  --transporte-soft: #10233f;
  --suscripciones: #b56bff;
  --suscripciones-soft: #26123f;
  --cuidado: #ff8fc4;
  --cuidado-soft: #3a1a2c;
  --entretenimiento: #ffd23d;
  --entretenimiento-soft: #3a300d;
  --comida: #ff8a4d;
  --comida-soft: #3a1e0d;
  --otros: #9a9aa4;
  --otros-soft: #232328;

  /* ---- Tipografía ---- */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ---- Radios ---- */
  --r-card: 20px;
  --r-hero: 28px;
  --r-pill: 999px;
  --r-sheet: 26px;

  /* ---- Sombra ---- */
  --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-fab: 0 12px 24px -8px rgba(139, 107, 255, 0.5);

  /* ---- Imagen de fondo / ilustraciones (el usuario reemplaza este archivo) ---- */
   --img-fondo: url('../assets/fondo.png'); /* ej: url('../assets/fondo.png') — imagen fija detrás de toda la app */
  --img-mascota-inicio: none; /* ej: url('../assets/mascota-inicio.png') */

  /* ---- Vidrio esmerilado (para que la imagen de fondo se asome detrás de las tarjetas) ---- */
  --glass-bg: rgba(23, 23, 27, 0.55);
  --glass-bg-strong: rgba(19, 19, 22, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(20px) saturate(150%);
}