/*
 * Tokens do design. Paletas copiadas EXATAMENTE de ../app/mobile/src/theme.ts.
 * Nenhuma tela usa cor solta: tudo passa por estas variáveis
 * (exceto cores de categoria e cartão, que vêm da API e entram via style="--cor:…").
 */

:root {
  /*
   * Escala da interface: todas as medidas estão em rem (16 px de design = 1 rem) e a raiz usa
   * 100% × escala. 0.9 = tudo 10% menor que os PNGs de 1440 px (pedido do dono, 04/10/2026).
   */
  --escala: 0.9;
}

:root,
[data-theme='light'] {
  color-scheme: light;

  /* Paleta clara */
  --fundo: #f4f5f7;
  --card: #ffffff;
  --borda: #e7e9ee;
  --divisor: #eef0f3;
  --controle: #eceef2;
  --pressionado: #f7f8fa;
  --trilho: #f1f3f6;
  --primaria: #2563eb;
  --primaria-clara: #e8effd;
  --primaria-suave: #93b4f8;
  --degrade-inicio: #3b82f6;
  --degrade-fim: #1d4ed8;
  --sucesso: #16a34a;
  --sucesso-claro: #e7f6ec;
  --perigo: #e11d48;
  --perigo-claro: #fde8ec;
  --alerta: #d97706;
  --alerta-claro: #fdf1e3;
  --investimento: #7c3aed;
  --investimento-claro: #f1eafd;
  --investimento-suave: #c4b5fd;
  --ciano: #0891b2;
  --texto: #0f172a;
  --texto-secundario: #55637a;
  --texto-terciario: #5f6b7f;
  --texto-aviso: #1e40af;
  --sobre-cor: #ffffff;
  --sobre-cor-suave: rgba(255, 255, 255, 0.85);
  --sobre-cor-fundo: rgba(255, 255, 255, 0.18);
  --sobre-cor-borda: rgba(255, 255, 255, 0.2);
  --sobre-cor-bolha: rgba(255, 255, 255, 0.08);
  --borda-circulo: #d5d9e0;
  --inativo: #cbd5e1;
  --halo: rgba(37, 99, 235, 0.15);
  --sobreposicao: rgba(15, 23, 42, 0.4);
  --sombra: #0f172a;

  /*
   * Acessibilidade (Fase 9): versões das cores para TEXTO com contraste AA (4,5:1) sobre card, fundo e o
   * "claro" da própria cor. As cores do app continuam nos preenchimentos, traços e gráficos.
   * Os textos secundário e terciário também foram escurecidos (no app: #64748B e #94A3B8).
   */
  --primaria-texto: #2561e7;
  --sucesso-texto: #147d41;
  --perigo-texto: #ce1c45;
  --alerta-texto: #a05c10;
  --investimento-texto: #7c3aed;
  --ciano-texto: #0e7490;
  /* Fundo dos botões primários e do contador (texto branco com 4,5:1 nos dois temas) */
  --primaria-botao: #2563eb;
  --perigo-botao: #e11d48;
  --sucesso-botao: #15803d;
  --alerta-botao: #b45309;
  --investimento-botao: #6d28d9;

  /* Item ativo do segmentado (card no claro, borda no escuro — Segmentado.tsx) */
  --segmento-ativo: #ffffff;

  /* Raios */
  --raio-sm: 0.625rem;
  --raio-md: 0.875rem;
  --raio-lg: 1rem;
  --raio-xl: 1.25rem;
  --raio-xxl: 1.5rem;
  --raio-pill: 62.4375rem;

  /* Sombras */
  --sombra-card: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.06);
  --sombra-primaria: 0 0.375rem 0.875rem rgba(37, 99, 235, 0.3);
  --sombra-flutuante: 0 0.75rem 2rem rgba(15, 23, 42, 0.16);

  /* Tipografia */
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --menu-largura: 16.5rem;
  --menu-largura-compacto: 4.5rem;
  --topo-altura: 5.5rem;
  /* Largura máxima do topo e do conteúdo (telas muito largas) */
  --conteudo-largura: 100rem;
}

/* Tema escuro escolhido no botão de tema (vale para qualquer bloco, ex.: /dev/componentes) */
[data-theme='dark'] {
  color-scheme: dark;
  --fundo: #0b0f17;
  --card: #151b26;
  --borda: #232b38;
  --divisor: #1e2632;
  --controle: #1c2330;
  --pressionado: #1a2230;
  --trilho: #1c2330;
  --primaria: #3b82f6;
  --primaria-clara: #172a4a;
  --primaria-suave: #2e4f86;
  --degrade-inicio: #2563eb;
  --degrade-fim: #1e3a8a;
  --sucesso: #22c55e;
  --sucesso-claro: #11301f;
  --perigo: #f43f5e;
  --perigo-claro: #3a1622;
  --alerta: #f59e0b;
  --alerta-claro: #33250e;
  --investimento: #a78bfa;
  --investimento-claro: #261c45;
  --investimento-suave: #5b4a99;
  --ciano: #22d3ee;
  --texto: #f1f5f9;
  --texto-secundario: #9baabd;
  --texto-terciario: #8794a6;
  --texto-aviso: #bfdbfe;
  --sobre-cor: #ffffff;
  --sobre-cor-suave: rgba(255, 255, 255, 0.85);
  --sobre-cor-fundo: rgba(255, 255, 255, 0.16);
  --sobre-cor-borda: rgba(255, 255, 255, 0.18);
  --sobre-cor-bolha: rgba(255, 255, 255, 0.06);
  --borda-circulo: #334155;
  --inativo: #334155;
  --halo: rgba(59, 130, 246, 0.25);
  --sobreposicao: rgba(0, 0, 0, 0.6);
  --sombra: #000000;
  --segmento-ativo: #232b38;
  --primaria-texto: #5492f6;
  --sucesso-texto: #22c55e;
  --perigo-texto: #f3627b;
  --alerta-texto: #f59e0b;
  --investimento-texto: #a78bfa;
  --ciano-texto: #22d3ee;
  --primaria-botao: #2563eb;
  --perigo-botao: #e11d48;
  --sucesso-botao: #15803d;
  --alerta-botao: #b45309;
  --investimento-botao: #6d28d9;

  --sombra-card: none;
  --sombra-primaria: 0 0.375rem 0.875rem rgba(59, 130, 246, 0.45);
  --sombra-flutuante: 0 0.75rem 2rem rgba(0, 0, 0, 0.5);
}

/* Sem escolha salva: segue o sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --fundo: #0b0f17;
    --card: #151b26;
    --borda: #232b38;
    --divisor: #1e2632;
    --controle: #1c2330;
    --pressionado: #1a2230;
    --trilho: #1c2330;
    --primaria: #3b82f6;
    --primaria-clara: #172a4a;
    --primaria-suave: #2e4f86;
    --degrade-inicio: #2563eb;
    --degrade-fim: #1e3a8a;
    --sucesso: #22c55e;
    --sucesso-claro: #11301f;
    --perigo: #f43f5e;
    --perigo-claro: #3a1622;
    --alerta: #f59e0b;
    --alerta-claro: #33250e;
    --investimento: #a78bfa;
    --investimento-claro: #261c45;
    --investimento-suave: #5b4a99;
    --ciano: #22d3ee;
    --texto: #f1f5f9;
    --texto-secundario: #9baabd;
    --texto-terciario: #8794a6;
    --texto-aviso: #bfdbfe;
    --sobre-cor: #ffffff;
    --sobre-cor-suave: rgba(255, 255, 255, 0.85);
    --sobre-cor-fundo: rgba(255, 255, 255, 0.16);
    --sobre-cor-borda: rgba(255, 255, 255, 0.18);
    --sobre-cor-bolha: rgba(255, 255, 255, 0.06);
    --borda-circulo: #334155;
    --inativo: #334155;
    --halo: rgba(59, 130, 246, 0.25);
    --sobreposicao: rgba(0, 0, 0, 0.6);
    --sombra: #000000;
    --segmento-ativo: #232b38;
    --primaria-texto: #5492f6;
    --sucesso-texto: #22c55e;
    --perigo-texto: #f3627b;
    --alerta-texto: #f59e0b;
    --investimento-texto: #a78bfa;
    --ciano-texto: #22d3ee;
    --primaria-botao: #2563eb;
    --perigo-botao: #e11d48;
    --sucesso-botao: #15803d;
    --alerta-botao: #b45309;
    --investimento-botao: #6d28d9;

    --sombra-card: none;
    --sombra-primaria: 0 0.375rem 0.875rem rgba(59, 130, 246, 0.45);
    --sombra-flutuante: 0 0.75rem 2rem rgba(0, 0, 0, 0.5);
  }
}