/* ================================================================
   TOKENS — Variáveis de design
   ================================================================ */

/* ── Modo escuro (padrão) ──────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:   #080812;
  --s1:   #111122;
  --s2:   #1a1a2e;
  --s3:   #242438;

  /* Borders */
  --bdr:  rgba(255, 255, 255, 0.07);
  --bdr2: rgba(255, 255, 255, 0.13);

  /* Texto */
  --txt:   #eeeeff;
  --muted: #9aa5be;

  /* Accent principal — azul petróleo/teal (era roxo) */
  --purple:    #14b8a6;
  --purple-bg: rgba(20, 184, 166, 0.13);
  --purple-d:  #0d7a72;

  /* Verde — entradas */
  --green:    #34d990;
  --green-bg: rgba(52, 217, 144, 0.12);
  --green-d:  #1a7a4a;

  /* Vermelho — gastos */
  --red:    #ff5577;
  --red-bg: rgba(255, 85, 119, 0.12);
  --red-d:  #8b1a33;

  /* Âmbar — variáveis */
  --amber:    #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.12);

  /* Azul — Investimentoss */
  --blue:    #60a5fa;
  --blue-bg: rgba(96, 165, 250, 0.12);
  --blue-d:  #1e4db7;

  /* Teal — gráficos */
  --teal:    #2dd4bf;
  --teal-bg: rgba(45, 212, 191, 0.12);

  /* Border radius */
  --r:   14px;
  --rs:  9px;
  --rxl: 22px;

  /* Transições */
  --trans: 0.2s ease;

  /* Tipografia */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', 'Plus Jakarta Sans', sans-serif;
}

/* ── Modo claro ────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:   #eef2f7;
  --s1:   #ffffff;
  --s2:   #f3f6fb;
  --s3:   #e5eaf2;

  --bdr:  rgba(0, 0, 0, 0.09);
  --bdr2: rgba(0, 0, 0, 0.16);

  --txt:   #0f172a;
  --muted: #5a6a85;

  --purple:    #0d9488;
  --purple-bg: rgba(13, 148, 136, 0.11);
  --purple-d:  #0f766e;

  --green:    #16a34a;
  --green-bg: rgba(22, 163, 74, 0.10);
  --green-d:  #14532d;

  --red:    #dc2626;
  --red-bg: rgba(220, 38, 38, 0.10);
  --red-d:  #7f1d1d;

  --amber:    #b45309;
  --amber-bg: rgba(180, 83, 9, 0.10);

  --blue:    #1d4ed8;
  --blue-bg: rgba(29, 78, 216, 0.10);
  --blue-d:  #1e3a8a;

  --teal:    #0d9488;
  --teal-bg: rgba(13, 148, 136, 0.10);
}