/* ═══════════════════════════════════════════════════════════
   BASE — cores (tema claro e escuro), tipos de letra, reset
   Para mudar uma cor, muda-a aqui nos três blocos (claro, escuro
   automático e escuro escolhido no botão).
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --surface-2:#F6F8FB; --line:#E1E6EF; --line-2:#ECEFF5;
  --ink:#0F1728; --ink-2:#4A556C; --ink-3:#848EA3;
  --brand:#2447D6; --brand-2:#1B38B0; --brand-soft:#E9EEFF; --on-brand:#FFFFFF;
  --ok:#0B8457; --ok-soft:#E1F3EA; --warn:#A96300; --warn-soft:#FFF1D6; --bad:#C23B2F; --bad-soft:#FCE8E5;
  --pend:#5A6479; --pend-soft:#EDF0F4;
  --side-bg:#0E1A42; --side-ink:#C4CEEC; --side-ink-2:#7584B3; --side-hover:#18265A; --side-active-bg:#22347A; --side-active:#FFFFFF; --side-line:#1F2C5E;
  --mark-bg:#FFFFFF;
  --overlay:rgba(9,14,30,.48);
  --shadow:0 1px 2px rgba(15,23,40,.06),0 6px 20px rgba(15,23,40,.06);
  /* Cor de cada categoria de despesa */
  --c-renda:#DA6D25; --c-ordenado:#2F6BED; --c-energia:#C99413; --c-agua:#1391B2; --c-fixa:#5F6E88; --c-imposto:#7A4BD6; --c-seguro:#118F7A; --c-marketing:#CF3F78;
  --f-display:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A0F1D; --surface:#111829; --surface-2:#161F34; --line:#222D46; --line-2:#1B2439;
  --ink:#E7ECF6; --ink-2:#A2ADC5; --ink-3:#6D7893;
  --brand:#6D8DFF; --brand-2:#8AA3FF; --brand-soft:#1A2757; --on-brand:#0A0F1D;
  --ok:#3CCB8E; --ok-soft:#0F2E24; --warn:#F2B347; --warn-soft:#33260C; --bad:#FF7066; --bad-soft:#3A1715;
  --pend:#9AA4BA; --pend-soft:#1C253B;
  --side-bg:#070B16; --side-ink:#AEB9D6; --side-ink-2:#5F6B8A; --side-hover:#111A31; --side-active-bg:#18244A; --side-active:#FFFFFF; --side-line:#141C33;
  --overlay:rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --c-renda:#F08A45; --c-ordenado:#6B95FF; --c-energia:#E8B83A; --c-agua:#3BB8D6; --c-fixa:#8C9AB5; --c-imposto:#A583F2; --c-seguro:#3CC2A6; --c-marketing:#EE6B9E;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A0F1D; --surface:#111829; --surface-2:#161F34; --line:#222D46; --line-2:#1B2439;
  --ink:#E7ECF6; --ink-2:#A2ADC5; --ink-3:#6D7893;
  --brand:#6D8DFF; --brand-2:#8AA3FF; --brand-soft:#1A2757; --on-brand:#0A0F1D;
  --ok:#3CCB8E; --ok-soft:#0F2E24; --warn:#F2B347; --warn-soft:#33260C; --bad:#FF7066; --bad-soft:#3A1715;
  --pend:#9AA4BA; --pend-soft:#1C253B;
  --side-bg:#070B16; --side-ink:#AEB9D6; --side-ink-2:#5F6B8A; --side-hover:#111A31; --side-active-bg:#18244A; --side-active:#FFFFFF; --side-line:#141C33;
  --overlay:rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --c-renda:#F08A45; --c-ordenado:#6B95FF; --c-energia:#E8B83A; --c-agua:#3BB8D6; --c-fixa:#8C9AB5; --c-imposto:#A583F2; --c-seguro:#3CC2A6; --c-marketing:#EE6B9E;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.015em;text-wrap:balance;font-weight:700}
p{margin:0}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* Utilitários */
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mono{font-family:var(--f-mono);font-size:.9em;letter-spacing:0}
.muted{color:var(--ink-3)}
.sm{font-size:13px}
.xs{font-size:12px}
.eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.late{color:var(--bad);font-weight:600}
.dash{color:var(--ink-3);font-weight:400}
.neg{color:var(--bad)}
.pos{color:var(--ok)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }