/* =====================================================================
   Finanças Pessoal — Design tokens
   Paleta "verde-azulado" (teal) + dourado — repaginação de 2026-09,
   pensada pra ficar mais próxima de um extrato/produto financeiro sério
   do que de um app genérico. Semântica de cor continua a mesma: o teal
   (antigo "brand") também é receita/positivo, dourado é meta/atenção,
   vermelho é despesa/negativo.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* Marca / receita — antes roxo+verde separados, agora um teal só */
  --color-brand-50:  #DCEEE9;
  --color-brand-100: #C7E4DC;
  --color-brand-400: #3E9483;
  --color-brand-500: #17786A;
  --color-brand-600: #0F6B5C;
  --color-brand-700: #0B5548;

  /* Receita / positivo — mesmo teal da marca */
  --color-success-50:  #DCEEE9;
  --color-success-500: #17786A;
  --color-success-600: #0F6B5C;

  /* Despesa / negativo */
  --color-danger-50:  #F6E3E1;
  --color-danger-500: #B23A3A;
  --color-danger-600: #96302F;

  /* Alerta (metas, faturas perto do limite) — dourado */
  --color-warning-50:  #F3E6CE;
  --color-warning-500: #B8862E;
  --color-warning-600: #9A6F26;

  /* Neutros */
  --color-bg:        #F1F4F2;
  --color-surface:   #FFFFFF;
  --color-surface-2: #E7EEEA;
  --color-border:    #DCE5DF;
  --color-text:      #12201C;
  --color-text-soft: #55665F;
  --color-text-faint:#8B988F;

  /* Tipografia — Fraunces pra títulos/valores grandes, Inter pro resto */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, 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(18, 32, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 32, 28, 0.08);
  --shadow-lg: 0 16px 40px rgba(18, 32, 28, 0.16);

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

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #0E1613;
    --color-surface:   #16211C;
    --color-surface-2: #1D2A24;
    --color-border:    #2A3A32;
    --color-text:      #EAF2EE;
    --color-text-soft: #A9BAB3;
    --color-text-faint:#6E8078;

    --color-brand-50:  #1D3A32;
    --color-brand-100: #22463D;
    --color-brand-400: #3E9483;
    --color-brand-500: #4FB89E;
    --color-brand-600: #4FB89E;
    --color-brand-700: #6BCBB3;

    --color-success-50:  #1D3A32;
    --color-success-500: #4FB89E;
    --color-success-600: #6BCBB3;

    --color-danger-50:  #3A2222;
    --color-danger-500: #E08585;
    --color-danger-600: #E89C9C;

    --color-warning-50:  #3A2F1A;
    --color-warning-500: #D9A84D;
    --color-warning-600: #E3BC72;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}