:root {
  /* ---- Marca PRUMO — "Luxury Financial Intelligence" ----
     Verde profundo + preto (autoridade, estabilidade) com dourado usado como acento pontual
     (conquista/patrimônio), nunca como preenchimento dominante. Regra de hierarquia: 70% verde
     profundo/petróleo/preto, 20% areia/grafite, 10% dourado + cores funcionais. */
  --prumo-green: #081f1d;
  --prumo-green-2: #0d2421;
  --prumo-green-3: #142d29;
  --prumo-black: #000000;
  --prumo-petroleum: #1a2a28;
  --prumo-gold: #d4af7c;
  --prumo-sand: #e8e1d6;
  --prumo-graphite: #282828;

  /* Ramp do dourado — usado só em CTAs primários, indicadores de destaque e pequenos acentos */
  --color-primary-50: #faf5ec;
  --color-primary-100: #f2e6d1;
  --color-primary-200: #e7d1ac;
  --color-primary-300: #dfc095;
  --color-primary-400: #dabb8a;
  --color-primary-500: #d4af7c;
  --color-primary-600: #be9a69;
  --color-primary-700: #a28152;
  --color-primary-800: #82683f;
  --color-primary-900: #5c492c;
  --color-primary: var(--color-primary-500);
  --color-primary-bright: #e4c69a;

  /* Gradiente de fundo — extremamente sutil, só pra painéis grandes (hero, login), nunca pra
     botões/ícones (esses usam --color-primary sólido). */
  --gradient-bg: linear-gradient(145deg, #081f1d 0%, #0d2421 60%, #000000 100%);

  /* Superfícies (tema padrão, escuro) */
  --color-gray-0: #ffffff;
  --color-gray-50: #f4f2ee;
  --color-gray-100: #e8e1d6;
  --color-gray-150: #cfc9be;
  --color-gray-200: #b6b1a7;
  --color-gray-300: #9d9a91;
  --color-gray-400: #84827b;
  --color-gray-500: #7d8985;
  --color-gray-600: #6b6f6b;
  --color-gray-700: #565a56;
  --color-gray-800: #3c3f3c;
  --color-gray-900: #282828;

  --surface-page: #081f1d;
  --surface-card: #102825;
  --surface-card-raised: #142d29;
  --surface-sidebar: #061613;
  --surface-sidebar-active: #1a2a28;
  --text-body: #e8e1d6;
  --text-muted: #7d8985;
  --text-inverse: #081f1d;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(232, 225, 214, 0.16);

  /* Overlays genéricos (hover, washes) */
  --overlay-faint: rgba(255, 255, 255, 0.02);
  --overlay-soft: rgba(255, 255, 255, 0.04);
  --overlay-mid: rgba(255, 255, 255, 0.06);
  --overlay-strong: rgba(255, 255, 255, 0.12);

  --surface-glass: rgba(16, 40, 37, 0.88);
  /* Linhas de topografia (textura de fundo opcional) — opacidade sempre entre 3% e 10% */
  --grid-line: rgba(232, 225, 214, 0.03);

  /* Semânticas — discretas, nunca competem com o dourado da marca */
  --color-success: #75b88a;
  --color-success-bg: rgba(117, 184, 138, 0.14);
  --color-warning: #d5a85b;
  --color-warning-bg: rgba(213, 168, 91, 0.14);
  --color-danger: #c95c5c;
  --color-danger-bg: rgba(201, 92, 92, 0.14);
  --color-info: #5c9da0;
  --color-info-bg: rgba(92, 157, 160, 0.14);

  /* Par divergente do gráfico (Receitas / Despesas) */
  --chart-in: #75b88a;
  --chart-in-bg: rgba(117, 184, 138, 0.14);
  --chart-out: #c95c5c;
  --chart-out-bg: rgba(201, 92, 92, 0.14);
  --chart-line: #7d8985;

  /* Escala de espaçamento (base 4px) — a interface precisa respirar, então usar generosamente */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* Raio — cards discretos, nunca "arredondado demais" (nada de radius-xl/pill em cards) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  /* Sombras discretas — nunca brancas, neon ou glow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.4);

  /* Tipografia — Inter (UI/corpo) predominante; Clash Display (a preferência da marca, grátis via
     CDN da Fontshare — ver @import em base.css) só pra títulos editoriais e números de
     patrimônio/meta em destaque. Playfair Display entra como 2º fallback caso a CDN da Fontshare
     não carregue. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Clash Display", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-display: 38px;

  --sidebar-width: 236px;
  --topbar-height: 64px;
  --bottom-nav-height: 64px;

  color-scheme: dark;
}

/* ---- Modo claro — mesma marca (verde/dourado), superfícies e escala de cinza invertidas para
   manter contraste de leitura. Ativado via [data-theme="light"] no <html> (ver assets/js/nav.js:
   applyTheme/toggleTheme), persistido em localStorage. ---- */
:root[data-theme="light"] {
  --color-gray-500: #6b6f6b;
  --color-gray-600: #565a56;
  --color-gray-700: #3c3f3c;
  --color-gray-800: #282828;
  --color-gray-900: #161814;

  --surface-page: #f6f4f0;
  --surface-card: #ffffff;
  --surface-card-raised: #ffffff;
  --surface-sidebar: #ffffff;
  --surface-sidebar-active: var(--color-primary-50);
  --text-body: #16241f;
  --text-muted: #5c6864;
  --text-inverse: #ffffff;
  --border-subtle: rgba(8, 31, 29, 0.09);
  --border-strong: rgba(8, 31, 29, 0.18);

  --overlay-faint: rgba(8, 31, 29, 0.025);
  --overlay-soft: rgba(8, 31, 29, 0.045);
  --overlay-mid: rgba(8, 31, 29, 0.06);
  --overlay-strong: rgba(8, 31, 29, 0.14);

  --surface-glass: rgba(255, 255, 255, 0.9);
  --grid-line: rgba(8, 31, 29, 0.035);

  --chart-line: #5c6864;

  /* As cores semânticas aparecem como texto colorido sobre fundo claro — precisam ser mais
     escuras aqui do que a versão usada sobre o fundo escuro, pra manter contraste de leitura. */
  --color-success: #2f7a4d;
  --color-warning: #8a6420;
  --color-danger: #a3372f;
  --color-info: #2c6d70;

  --color-primary-bright: #8a6a3a;

  --gradient-bg: linear-gradient(145deg, #f6f4f0 0%, #ece7dd 60%, #e3ddce 100%);

  --shadow-sm: 0 1px 2px rgba(8, 20, 18, 0.08);
  --shadow-md: 0 8px 24px rgba(8, 20, 18, 0.1);
  --shadow-lg: 0 20px 48px rgba(8, 20, 18, 0.16);

  color-scheme: light;
}