/* =====================================================================
   Finanças Pessoal — Design tokens
   Paleta pensada para leitura rápida na rua: verde = entrou dinheiro,
   rosa/vermelho = saiu dinheiro, roxo = marca/ações primárias.
   ===================================================================== */
:root {
  /* Marca */
  --color-brand-50:  #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-400: #818cf8;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;

  /* Receita / positivo */
  --color-success-50:  #ecfdf5;
  --color-success-500: #10b981;
  --color-success-600: #059669;

  /* Despesa / negativo */
  --color-danger-50:  #fff1f2;
  --color-danger-500: #f43f5e;
  --color-danger-600: #e11d48;

  /* Alerta (metas, faturas perto do limite) */
  --color-warning-50:  #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;

  /* Neutros */
  --color-bg:        #f7f8fb;
  --color-surface:   #ffffff;
  --color-surface-2: #f1f2f8;
  --color-border:    #e6e8f0;
  --color-text:      #1e2130;
  --color-text-soft: #6b7086;
  --color-text-faint:#9497ab;

  /* Tipografia */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Superfícies */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 33, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 33, 48, 0.08);
  --shadow-lg: 0 16px 40px rgba(30, 33, 48, 0.14);

  --nav-height: 64px;
  --topbar-height: 56px;
  --max-width: 480px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #0f1117;
    --color-surface:   #171a24;
    --color-surface-2: #1e212c;
    --color-border:    #2a2e3c;
    --color-text:      #f1f2f8;
    --color-text-soft: #a4a8bd;
    --color-text-faint:#6b7086;
  }
}