/* =====================================================================
   Design system — tokens
   Fonte: /mockup/css/style.css (seção 1). Cores, sombras e raios são
   idênticos ao mockup; tipografia e espaçamento viraram escalas nomeadas
   com os mesmos valores usados nas telas.
   Os arquivos desta pasta são carregados em ordem alfabética (prefixo numérico).
   ===================================================================== */
:root {
  color-scheme: light;

  /* marca e semântica */
  --primaria: #0F766E;
  --primaria-hover: #115E59;
  --primaria-contraste: #FFFFFF;
  --primaria-suave: #E6F4F2;
  --primaria-texto: #0F766E;

  --receita: #16A34A;
  --receita-texto: #15803D;
  --receita-suave: #DCFCE7;
  --despesa: #DC2626;
  --despesa-texto: #B91C1C;
  --despesa-suave: #FEE2E2;
  --alerta: #EA580C;
  --alerta-texto: #C2410C;
  --alerta-suave: #FFEDD5;
  --pago: #94A3B8;
  --pago-texto: #475569;
  --pago-suave: #F1F5F9;

  /* superfícies e texto */
  --fundo: #F3F5F7;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFC;
  --superficie-3: #EEF2F6;
  --borda: #E2E8F0;
  --borda-forte: #CBD5E1;
  --texto: #0F172A;
  --texto-2: #475569;
  --texto-3: #64748B;

  /* gráficos (validados para daltonismo) */
  --grafico-receita: #16A34A;
  --grafico-despesa: #991B1B;
  --grafico-linha: #0F766E;
  --grafico-neutro: #94A3B8;
  --grafico-grade: #E9EDF2;
  --grafico-eixo: #64748B;

  /* tipografia */
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tamanho-2xs: 11px;   /* barra de navegação inferior, avatar pequeno */
  --tamanho-xs: 12px;    /* badges, ajuda de campo, legendas */
  --tamanho-sm: 13px;    /* rótulos de campo, subtítulos, botão pequeno */
  --tamanho-md: 14px;    /* botões, avisos, textos de apoio */
  --tamanho-base: 15px;  /* corpo e inputs */
  --tamanho-lg: 16px;    /* título de card, marca */
  --tamanho-xl: 18px;    /* título do topo e de modais */
  --tamanho-2xl: 22px;   /* valor de indicador */
  --tamanho-3xl: 24px;   /* título de página */
  --tamanho-4xl: 26px;   /* título das telas de login e cadastro */
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;
  --altura-linha: 1.5;
  --altura-linha-titulo: 1.25;
  --altura-linha-compacta: 1.2;

  /* espaçamento: base de 4px, com os meios passos que o mockup usa */
  --espaco-0-5: 2px;
  --espaco-1: 4px;
  --espaco-1-5: 6px;
  --espaco-2: 8px;
  --espaco-2-5: 10px;
  --espaco-3: 12px;
  --espaco-3-5: 14px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-7: 28px;
  --espaco-8: 32px;
  --espaco-10: 40px;
  --espaco-12: 48px;

  /* forma */
  --raio: 14px;
  --raio-sm: 10px;
  --raio-lg: 16px;
  --raio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.07);
  --sombra-2: 0 10px 30px rgba(15, 23, 42, 0.14);
  --sombra-fab: 0 8px 20px rgba(15, 118, 110, 0.35);
  --foco: #0F766E;
  --overlay: rgba(15, 23, 42, 0.5);

  /* dimensões e movimento */
  --altura-controle: 40px;
  --altura-controle-sm: 32px;
  --altura-input: 42px;
  --transicao: 180ms ease;
  --sidebar-largura: 248px;
  --topo-altura: 64px;
  --nav-altura: 64px;
}

/* Tema escuro: segue o sistema, a menos que o usuário tenha escolhido "claro".
   O bloco se repete em :root[data-theme="dark"] porque CSS não permite juntar
   um seletor com uma media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primaria: #14B8A6;
    --primaria-hover: #2DD4BF;
    --primaria-contraste: #042F2E;
    --primaria-suave: rgba(20, 184, 166, 0.14);
    --primaria-texto: #5EEAD4;
    --receita: #22C55E;
    --receita-texto: #4ADE80;
    --receita-suave: rgba(34, 197, 94, 0.14);
    --despesa: #EF4444;
    --despesa-texto: #F87171;
    --despesa-suave: rgba(239, 68, 68, 0.14);
    --alerta: #F97316;
    --alerta-texto: #FB923C;
    --alerta-suave: rgba(249, 115, 22, 0.15);
    --pago: #64748B;
    --pago-texto: #A9B4C0;
    --pago-suave: rgba(148, 163, 184, 0.12);
    --fundo: #0B1016;
    --superficie: #141B24;
    --superficie-2: #1A2330;
    --superficie-3: #212C3A;
    --borda: #263241;
    --borda-forte: #334155;
    --texto: #E6EDF3;
    --texto-2: #A9B4C0;
    --texto-3: #8B98A8;
    --grafico-receita: #16A34A;
    --grafico-despesa: #B91C1C;
    --grafico-linha: #14B8A6;
    --grafico-neutro: #64748B;
    --grafico-grade: #222C39;
    --grafico-eixo: #8B98A8;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-2: 0 12px 32px rgba(0, 0, 0, 0.5);
    --sombra-fab: 0 8px 20px rgba(0, 0, 0, 0.45);
    --foco: #5EEAD4;
    --overlay: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --primaria: #14B8A6;
  --primaria-hover: #2DD4BF;
  --primaria-contraste: #042F2E;
  --primaria-suave: rgba(20, 184, 166, 0.14);
  --primaria-texto: #5EEAD4;
  --receita: #22C55E;
  --receita-texto: #4ADE80;
  --receita-suave: rgba(34, 197, 94, 0.14);
  --despesa: #EF4444;
  --despesa-texto: #F87171;
  --despesa-suave: rgba(239, 68, 68, 0.14);
  --alerta: #F97316;
  --alerta-texto: #FB923C;
  --alerta-suave: rgba(249, 115, 22, 0.15);
  --pago: #64748B;
  --pago-texto: #A9B4C0;
  --pago-suave: rgba(148, 163, 184, 0.12);
  --fundo: #0B1016;
  --superficie: #141B24;
  --superficie-2: #1A2330;
  --superficie-3: #212C3A;
  --borda: #263241;
  --borda-forte: #334155;
  --texto: #E6EDF3;
  --texto-2: #A9B4C0;
  --texto-3: #8B98A8;
  --grafico-receita: #16A34A;
  --grafico-despesa: #B91C1C;
  --grafico-linha: #14B8A6;
  --grafico-neutro: #64748B;
  --grafico-grade: #222C39;
  --grafico-eixo: #8B98A8;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --sombra-fab: 0 8px 20px rgba(0, 0, 0, 0.45);
  --foco: #5EEAD4;
  --overlay: rgba(0, 0, 0, 0.6);
}