/* =============================================================================
   Tamias: base compartilhada pelo app (app.css) e pelo site (site.css).

   Tudo o que define a identidade fica aqui, uma vez só:
   - a fonte (Bricolage Grotesque, hospedada no próprio app);
   - as cores da marca, tiradas do esquilo, e as cores de uso (que mudam no modo escuro);
   - tipografia, botões, foco e ícones.
   Regra de ouro: as outras folhas usam estas variáveis, nunca um hex solto.
   ============================================================================= */

/* Bricolage Grotesque (licença SIL Open Font License). Variável: peso 200–800 e tamanho óptico. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fontes/bricolage-grotesque.c47ac31e5437.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* --- Cores ----------------------------------------------------------------- */

:root {
  /* Marca: fixas, iguais no claro e no escuro. */
  --copa: #0b7a6e;         /* verde-azulado do fundo do ícone */
  --copa-funda: #086357;
  --toca: #10302b;         /* tinta escura */
  --neblina: #eef5f2;      /* fundo claro */
  --moeda: #f2b544;        /* dourado da moeda: colocar dinheiro, assinar */
  --moeda-funda: #e0a12c;
  --bochecha: #f4a08a;
  --listra: #a8dcd2;

  /* Uso: o modo escuro troca só estes. */
  --fundo: var(--neblina);
  --superficie: #ffffff;
  --superficie-2: #e8f0ed;   /* trilhos de barras, hover, item ativo */
  --texto: var(--toca);
  --sutil: #4c6660;
  --borda: #d3e4df;
  --sombra: 0 1px 2px rgb(16 48 43 / .05), 0 8px 24px -12px rgb(16 48 43 / .18);

  --marca: var(--copa);       /* links, botão principal, seleção */
  --marca-texto: #ffffff;
  --marca-suave: #dcefe9;

  --positivo: #157a45;
  --negativo: #b42318;
  --alerta: #a35a00;        /* texto de alerta (precisa de contraste) */
  --alerta-barra: #e4a11b;  /* barra de alerta (precisa de brilho) */

  --lateral-fundo: var(--copa);   /* barra do app */
  --lateral-texto: #ffffff;

  /* Gráficos: duas séries com bom contraste entre si e para daltonismo. */
  --serie-1: #0b8a7c;
  --serie-2: #e06a35;

  /* Raios por hierarquia: bloco grande > cartão > controle. */
  --raio-g: 20px;
  --raio: 14px;
  --raio-p: 11px;

  --fonte: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0c1a18;
    --superficie: #132522;
    --superficie-2: #1b302c;
    --texto: #e6f0ed;
    --sutil: #9db5af;
    --borda: #24403a;
    --sombra: none;

    --marca: #3fb3a2;
    --marca-texto: #062420;
    --marca-suave: #173a34;

    --positivo: #5bc98a;
    --negativo: #f2837a;
    --alerta: #f0b44c;
    --alerta-barra: #f0b44c;

    --lateral-fundo: #0f2a26;

    --serie-1: #3fb3a2;
    --serie-2: #e07a4a;
    color-scheme: dark;
  }
}

/* --- Base ------------------------------------------------------------------ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
img, svg { display: block; }
a { color: var(--marca); text-underline-offset: 3px; }
small { font-size: .8125em; }
strong { font-weight: 650; }

/* Títulos do app: a fonte da marca, apertada e firme. */
.titulo-pagina {
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.35rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.titulo-secao { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }

/* Números: todos os dígitos com a mesma largura, para alinhar valores. */
.num { font-variant-numeric: tabular-nums; }
.valor-grande {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
.sutil { color: var(--sutil); }

/* Visível só para leitores de tela. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Foco -------------------------------------------------------------------
   Anel duplo (claro + escuro): aparece sobre qualquer fundo, até o verde da marca. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--marca);
}

/* --- Ícones (SVG de traço, seguem a cor do texto) --------------------------- */
.icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Botões -----------------------------------------------------------------
   .botao: ação principal (verde). .botao-moeda: colocar dinheiro / assinar.
   .secundario: alternativa discreta. .perigo: excluir. */
.botao, .botao-moeda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .55rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.botao { background: var(--marca); color: var(--marca-texto); }
.botao:hover { background: color-mix(in srgb, var(--marca) 86%, black); }
.botao-moeda { background: var(--moeda); color: var(--toca); }
.botao-moeda:hover { background: var(--moeda-funda); }
.botao.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda); font-weight: 550; }
.botao.secundario:hover { background: var(--superficie-2); }
.botao.perigo { background: var(--negativo); color: #fff; }
.botao.perigo:hover { background: color-mix(in srgb, var(--negativo) 86%, black); }
.botao.largo { width: 100%; }
.botao .icone, .botao-moeda .icone { width: 18px; height: 18px; stroke-width: 2.2; }
.botao.icone-so { width: 44px; padding: 0; }

.botao-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--marca);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.botao-link:hover { text-decoration: underline; }

.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}