/* Tokens do app Sobra no Caixa: fonte única das decisões visuais (cores por tema, tipo, espaço, raio, sombra, camada, movimento).
   Tema: <html data-tema="claro|escuro"> resolvido antes da pintura por js/tema.js (preferência: claro, escuro ou automático).
   Os nomes antigos (--esmalte-*, --ponteiro-*, --cor-grafico-*) continuam valendo como apelidos. */
@font-face { font-family: 'Archivo'; src: url('fontes/Archivo-VF.ttf') format('truetype');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  /* ---------- Marca (iguais nos dois temas) ---------- */
  --lima: #C9F04B;
  --lima-claro: #DDF78A;
  --lima-escuro: #4B6B00;
  --coral: #FF6A4D;
  --coral-escuro: #C23A22;
  --grafite-950: #0B0E0D;
  --grafite-900: #111513;
  --grafite-850: #141917;
  --grafite-800: #1B211F;
  --grafite-700: #232A27;
  --grafite-600: #34403B;
  --grafite-500: #5E6B66;
  --grafite-400: #8C9A94;
  --grafite-300: #B4BEB9;
  --mineral-200: #E3E6DF;
  --mineral-100: #F1F3EE;
  --mineral-50: #F7F8F5;

  /* ---------- Tema claro (padrão) ---------- */
  --cor-fundo: #F2F3EF;
  --cor-lateral: #F2F3EF;
  --cor-superficie: #FFFFFF;
  --cor-superficie-2: #F1F3EE;
  --cor-superficie-3: #E7EAE3;
  --cor-vidro: rgb(242 243 239 / .78);
  --cor-linha: #E3E6DF;
  --cor-linha-forte: #C9CEC6;
  --cor-borda-input: #8A948E;
  --cor-texto: #111513;
  --cor-texto-2: #56615B;
  --cor-texto-inverso: #F4F7F1;
  --cor-primaria: #131816;
  --cor-primaria-hover: #2A322E;
  --cor-sobre-primaria: #F4F7F1;
  --cor-primaria-suave: #EEF5D8;
  --cor-texto-primaria: #4B6B00;
  --cor-ativo-fundo: #C9F04B;
  --cor-ativo-texto: #111513;
  --cor-ativo-icone: #111513;
  --cor-destaque: #C9F04B;
  --cor-destaque-hover: #D6F56F;
  --cor-sobre-destaque: #111513;
  --cor-texto-destaque: #4B6B00;
  --cor-foco: #4B6B00;
  --cor-sucesso: #2F6B12;
  --cor-sucesso-fundo: #EAF4D8;
  --cor-alerta: #8A5300;
  --cor-alerta-fundo: #FFF1D6;
  --cor-erro: #B8361F;
  --cor-erro-fundo: #FDE9E3;
  --cor-info: #1E5F8C;
  --cor-info-fundo: #E3EFF8;
  --cor-backdrop: rgb(17 21 19 / .32);
  /* Cartão-mostrador: a única superfície invertida do painel */
  --cor-inverso: #131816;
  --cor-inverso-texto: #F1F4EE;
  --cor-inverso-texto-2: #A5B0AA;
  --cor-inverso-linha: #2A322E;
  --cor-inverso-serie-1: #C9F04B;
  --cor-inverso-serie-2: #55615B;
  --cor-inverso-neg: #FF6A4D;
  /* Séries de gráfico */
  --cor-serie-1: #6A8F00;
  --cor-serie-2: #2F3A35;
  --cor-serie-3: #1E7FB8;
  --cor-serie-4: #C2412A;
  --cor-serie-saldo: #111513;
  --sombra-1: 0 1px 2px rgb(17 21 19 / .05);
  --sombra-2: 0 6px 16px -6px rgb(17 21 19 / .10), 0 2px 4px rgb(17 21 19 / .04);
  --sombra-3: 0 24px 48px -16px rgb(17 21 19 / .22), 0 6px 14px rgb(17 21 19 / .06);
  --brilho-topo: transparent;
  color-scheme: light;

  /* ---------- Apelidos antigos ---------- */
  --esmalte-500: var(--cor-serie-1);
  --esmalte-800: var(--grafite-850);
  --ponteiro-400: var(--coral);
  --ponteiro-500: var(--coral);
  --cor-grafico-entrada: var(--cor-serie-1);
  --cor-grafico-saida: var(--cor-serie-2);
  --cor-grafico-saldo: var(--cor-serie-saldo);

  /* ---------- Tipo (escala fixa ~1.2; o produto não usa tipo fluido) ---------- */
  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.25rem;
  --texto-4xl: 2.875rem;
  --texto-5xl: 3.5rem;
  --texto-6xl: 4.25rem;
  --linha-apertada: 1.04;
  --linha-titulo: 1.18;
  --linha-texto: 1.55;
  --peso-texto: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-titulo: 650;
  --peso-display: 750;
  --largura-display: 112%;
  --largura-titulo: 104%;
  --largura-texto: 100%;
  --tracking-titulo: -0.018em;
  --tracking-display: -0.032em;

  /* ---------- Espaço (base 4) ---------- */
  --espaco-0: 0;
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --espaco-8: 4rem;
  --espaco-9: 6rem;
  --espaco-10: 8rem;

  /* ---------- Raios ---------- */
  --raio-xs: 4px;
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 16px;
  --raio-xl: 22px;
  --raio-pilula: 999px;

  /* ---------- Camadas ---------- */
  --z-topo: 20;
  --z-lateral: 30;
  --z-menu: 40;
  --z-modal: 50;
  --z-aviso: 60;

  /* ---------- Movimento ---------- */
  --duracao-instante: 90ms;
  --duracao-rapido: 140ms;
  --duracao-base: 220ms;
  --duracao-lento: 340ms;
  --duracao-entrada: 520ms;
  --duracao-grafico: 900ms;
  --duracao-ponteiro: 600ms;
  --curva-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-entrada: cubic-bezier(0.55, 0, 1, 0.45);
  --curva-movimento: cubic-bezier(0.65, 0, 0.35, 1);
  --curva-assentar: cubic-bezier(0.16, 1, 0.3, 1);
  --passo-escalonado: 45ms;
  --deslocamento-entrada: 12px;
  --desfoque-entrada: 4px;

  /* ---------- Layout (pontos de quebra usados nas media queries: 600, 900, 1200) ---------- */
  --largura-lateral: 248px;
  --largura-lateral-recolhida: 76px;
  --altura-topo: 64px;
  --largura-conteudo: 1320px;
}

/* ---------- Tema escuro: superfícies por tom, nunca inversão do claro ---------- */
:root[data-tema="escuro"] {
  --cor-fundo: #0B110E;
  --cor-lateral: #0B110E;
  --cor-superficie: #131B17;
  --cor-superficie-2: #1A231F;
  --cor-superficie-3: #222D28;
  --cor-vidro: rgb(11 17 14 / .74);
  --cor-linha: #202A25;
  --cor-linha-forte: #34403B;
  --cor-borda-input: #5E6B66;
  --cor-texto: #ECF0EC;
  --cor-texto-2: #9AA6A0;
  --cor-texto-inverso: #0B0E0D;
  --cor-primaria: #C9F04B;
  --cor-primaria-hover: #D6F56F;
  --cor-sobre-primaria: #0B0E0D;
  --cor-primaria-suave: #1E2614;
  --cor-texto-primaria: #C9F04B;
  --cor-ativo-fundo: #C9F04B;
  --cor-ativo-texto: #0B0E0D;
  --cor-ativo-icone: #0B0E0D;
  --cor-destaque: #C9F04B;
  --cor-destaque-hover: #D6F56F;
  --cor-sobre-destaque: #0B0E0D;
  --cor-texto-destaque: #C9F04B;
  --cor-foco: #C9F04B;
  --cor-sucesso: #B7DE55;
  --cor-sucesso-fundo: #1B2312;
  --cor-alerta: #F2B85C;
  --cor-alerta-fundo: #2A2112;
  --cor-erro: #FF8269;
  --cor-erro-fundo: #2C1612;
  --cor-info: #7CC3EE;
  --cor-info-fundo: #12212B;
  --cor-backdrop: rgb(4 6 5 / .6);
  --cor-inverso: #E8ECE3;
  --cor-inverso-texto: #0F1311;
  --cor-inverso-texto-2: #4D5853;
  --cor-inverso-linha: #CBD1C6;
  --cor-inverso-serie-1: #4B6B00;
  --cor-inverso-serie-2: #9AA59F;
  --cor-inverso-neg: #A8301B;
  --cor-serie-1: #C9F04B;
  --cor-serie-2: #6F7D77;
  --cor-serie-3: #6CC0EE;
  --cor-serie-4: #FF8269;
  --cor-serie-saldo: #ECF0EC;
  --sombra-1: 0 1px 0 rgb(255 255 255 / .02) inset;
  --sombra-2: 0 12px 28px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .03) inset;
  --sombra-3: 0 32px 64px -20px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .05) inset;
  --brilho-topo: rgb(201 240 75 / .045);
  color-scheme: dark;
}

/* Movimento reduzido: fades curtos ficam; deslocamento, escala, contagem e crescimento saem. */
@media (prefers-reduced-motion: reduce) {
  :root { --curva-assentar: var(--curva-saida); --duracao-ponteiro: 160ms; --duracao-entrada: 160ms; --duracao-grafico: 1ms;
    --passo-escalonado: 0ms; --deslocamento-entrada: 0px; --desfoque-entrada: 0px; }
}
/* Celular: sem desfoque na entrada (custa caro em aparelho de entrada) */
@media (max-width: 760px) { :root { --desfoque-entrada: 0px; } }