/* ══════════════════════════════════════════
   FinanzApp — Temas: Oscuro + Claro + 5 colores
══════════════════════════════════════════ */

/* ── BASE DARK (default) ── */
:root {
  --bg:     #0b0c14;
  --bg2:    #12131e;
  --bg3:    #191a28;
  --bg4:    #202132;
  --border: rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.13);
  --text:   #eeeef5;
  --text2:  #9191aa;
  --text3:  #4a4a62;
  --shadow: 0 8px 32px rgba(0,0,0,.5);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.35);
  --input-bg: #191a28;

  /* Accent — Galaxia */
  --accent:   #7f6cf5;
  --accent-l: #a394ff;
  --accent-d: #5a49d0;
  --green:    #2dd4a0;
  --green-d:  #1a9e75;
  --red:      #f46f6f;
  --red-d:    #c94f4f;
  --amber:    #f5b942;
  --amber-d:  #c9920e;
  --blue:     #5ba4f5;
  --pink:     #e879b8;
}

/* ══════════════════════════════
   MODO CLARO
══════════════════════════════ */
:root.light {
  --bg:     #f4f5fa;
  --bg2:    #ffffff;
  --bg3:    #f0f1f8;
  --bg4:    #e8e9f5;
  --border: rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.14);
  --text:   #1a1a2e;
  --text2:  #5a5a78;
  --text3:  #9898b8;
  --shadow: 0 8px 32px rgba(100,100,160,.12);
  --shadow-sm: 0 2px 12px rgba(100,100,160,.08);
  --input-bg: #f0f1f8;
}

/* ══════════════════════════════
   TEMAS OSCUROS
══════════════════════════════ */
:root.ocean {
  --accent:   #3b82f6;
  --accent-l: #60a5fa;
  --accent-d: #1d4ed8;
  --green:    #06b6d4;
  --green-d:  #0891b2;
  --bg:  #060d1a; --bg2: #0b1526; --bg3: #111d35;
}
:root.forest {
  --accent:   #10b981;
  --accent-l: #34d399;
  --accent-d: #059669;
  --green:    #4ade80;
  --green-d:  #16a34a;
  --bg:  #060f09; --bg2: #0b1810; --bg3: #102216;
}
:root.sunset {
  --accent:   #f97316;
  --accent-l: #fb923c;
  --accent-d: #ea580c;
  --green:    #eab308;
  --green-d:  #a16207;
  --bg:  #120800; --bg2: #1e0f00; --bg3: #261500;
}
:root.rose {
  --accent:   #e879b8;
  --accent-l: #f0a8d0;
  --accent-d: #be185d;
  --green:    #4ade80;
  --green-d:  #16a34a;
  --bg:  #12080f; --bg2: #1e0d18; --bg3: #271220;
}

/* ══════════════════════════════
   TEMAS CLAROS
══════════════════════════════ */
:root.light.ocean {
  --accent: #2563eb; --accent-l: #3b82f6; --accent-d: #1d4ed8;
  --green:  #0891b2; --green-d:  #0e7490;
}
:root.light.forest {
  --accent: #059669; --accent-l: #10b981; --accent-d: #047857;
  --green:  #16a34a; --green-d:  #15803d;
}
:root.light.sunset {
  --accent: #ea580c; --accent-l: #f97316; --accent-d: #c2410c;
  --green:  #ca8a04; --green-d:  #a16207;
  --bg: #fffbf5; --bg2: #ffffff; --bg3: #fef3e2;
}
:root.light.rose {
  --accent: #db2777; --accent-l: #ec4899; --accent-d: #be185d;
  --green:  #16a34a; --green-d:  #15803d;
  --bg: #fdf4f9; --bg2: #ffffff; --bg3: #fce7f3;
}

/* Modo claro + tema oscuro => mantener variables claro pero acento oscuro */
:root.light { --accent: #6d54f0; --accent-l: #7f6cf5; --accent-d: #4f37d9; }