/* ==========================================================================
   Parsimonia — tokens do design system v1 (outubro/2026)
   Substitui o bloco :root do topo de public/style.css e o bloco de cores
   dos gráficos (--v1, --v2, --v3). Os nomes antigos foram mantidos, então
   o CSS existente continua funcionando; os nomes novos estão marcados (novo).
   Fontes: adicionar no <head> do index.html, antes do style.css:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap">
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Superfícies */
  --bg: #FFF6EC;            /* fundo creme */
  --card: #FFFFFF;          /* cartões e campos */
  --sunken: #F7E9DA;        /* (novo) trilhos de barra, controle segmentado */
  --line: #F1DFCC;          /* divisórias */
  --line-strong: #E6CDB6;   /* (novo) borda de campo e botão contorno */

  /* Texto */
  --ink: #2B1D16;
  --muted: #6B564A;         /* texto de apoio — 6,4:1 sobre o creme */

  /* Marca */
  --brand: #C9461F;         /* tangerina — ação principal, uma por tela */
  --brand-ink: #FFFFFF;     /* texto sobre --brand */
  --brand-soft: #FFE3D3;    /* (novo) botão secundário, foco */
  --brand-soft-ink: #7A2A10;/* (novo) texto sobre --brand-soft */
  --accent: #FFC857;        /* (novo) amarelo da linha de base do logo */
  --link: #A33614;          /* (novo) tangerina escura para texto e links (6,3:1); use --brand só em preenchimentos */

  /* Significado */
  --pay: #4B32A8;           /* (novo) o que você deve: faturas a pagar */
  --pay-soft: #ECE5FF;      /* (novo) fundo do cartão "Faturas a pagar" */
  --pay-soft-ink: #3A2690;  /* (novo) */
  --in: #1C6A93;            /* (novo) entrou */
  --good: #1F7A66;          /* positivo, concluído, progresso de plano */
  --good-soft: #E2F2EC;     /* (novo) */
  --bad: #A8323F;           /* saiu, erro, apagar */
  --bad-soft: #FFE4E7;      /* (novo) */
  --warn: #9A5B00;          /* atenção, aguardando */
  --warn-soft: #FFF1CC;     /* (novo) */

  /* Conversa */
  --bubble-me: #C9461F;     /* sua mensagem: tangerina, texto branco */
  --bubble-me-ink: #FFFFFF; /* (novo) */
  --bubble-bot: #FFFFFF;

  /* Gráficos — ordem fixa */
  --v1: #2F7FC4;            /* entradas */
  --v2: #E58A2E;            /* não essenciais */
  --v3: #1F7A66;            /* essenciais */
  --v4: #8B6FD6;            /* (novo) caixinhas */

  /* Tipografia (novo) */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Forma (novo) */
  --r-sm: 12px;             /* campos */
  --r-md: 22px;             /* cartões, linhas de lista */
  --r-lg: 28px;             /* cartão de destaque */
  --r-pill: 999px;          /* botões, chips, menu */
  --tap: 44px;              /* alvo mínimo de toque */
  --field-h: 46px;          /* altura de campo */
  --shadow-float: 0 12px 30px -12px rgba(43, 29, 22, 0.35);

  /* Espaçamento (novo) — base 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1612; --card: #2B211C; --sunken: #251C17; --line: #3A2C24; --line-strong: #4A3A30;
    --ink: #FBEFE6; --muted: #CDB8A9;
    --brand: #FF8A5C; --brand-ink: #2B1D16; --brand-soft: #4A2618; --brand-soft-ink: #FFD2BD; --accent: #FFC857; --link: #FF8A5C;
    --pay: #B9A6FF; --pay-soft: #34295A; --pay-soft-ink: #DCD3FF;
    --in: #7DB8F0; --good: #5FC7A8; --good-soft: #173A31; --bad: #FF8FA0; --bad-soft: #4A1F26;
    --warn: #FFC857; --warn-soft: #3D2F12;
    --bubble-me: #FF8A5C; --bubble-me-ink: #2B1D16; --bubble-bot: #2B211C;
    --v1: #5A9EE0; --v2: #F29B4A; --v3: #3FAE8C; --v4: #A48CF0;
    --shadow-float: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  }
}
/* Tema escuro forçado (se um dia houver botão de tema: <html data-theme="dark">) */
:root[data-theme="dark"] {
  --bg: #1E1612; --card: #2B211C; --sunken: #251C17; --line: #3A2C24; --line-strong: #4A3A30;
  --ink: #FBEFE6; --muted: #CDB8A9;
  --brand: #FF8A5C; --brand-ink: #2B1D16; --brand-soft: #4A2618; --brand-soft-ink: #FFD2BD; --accent: #FFC857; --link: #FF8A5C;
  --pay: #B9A6FF; --pay-soft: #34295A; --pay-soft-ink: #DCD3FF;
  --in: #7DB8F0; --good: #5FC7A8; --good-soft: #173A31; --bad: #FF8FA0; --bad-soft: #4A1F26;
  --warn: #FFC857; --warn-soft: #3D2F12;
  --bubble-me: #FF8A5C; --bubble-me-ink: #2B1D16; --bubble-bot: #2B211C;
  --v1: #5A9EE0; --v2: #F29B4A; --v3: #3FAE8C; --v4: #A48CF0;
  --shadow-float: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}

/* Base tipográfica */
html, body { font: 16px/1.45 var(--font-body); }
h1, h2, h3, .num-big, .tile .v, .plan-big { font-family: var(--font-display); letter-spacing: -0.02em; }
.n, .v, .num, .pb-val, .tbl .n { font-variant-numeric: tabular-nums; }