/* ==========================================================================
   EconoRadar - tokens
   ==========================================================================

   Todo valor visual do produto vive aqui. Nenhum outro arquivo CSS declara
   cor em hex, medida de espacamento ou tamanho de fonte: todos consomem
   var(--...) deste arquivo.

   Direcao: modernismo suico aplicado a dado financeiro. Densidade alta,
   hierarquia feita por tipografia e espaco. Cor com parcimonia, e quase
   sempre significando algo: alta, baixa ou destaque.

   Unica excecao inevitavel: largura de breakpoint em @media nao aceita
   custom property, por limitacao do CSS. Os valores estao comentados em
   layout.css, em um so lugar.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* ----------------------------------------------------------------------
       PALETA - tema escuro, que e o padrao
       ----------------------------------------------------------------------
       Fundo quase preto azulado, duas superficies elevadas, borda de baixo
       contraste e texto em tres niveis de enfase. Todos os pares de texto
       sobre fundo foram medidos e passam WCAG AA (>= 4,5:1).
       ---------------------------------------------------------------------- */

    --cor-fundo: #0a0d14;
    --cor-superficie: #11151f;
    --cor-superficie-elevada: #171c28;
    --cor-superficie-afundada: #070910;

    --cor-borda: #232937;
    --cor-borda-forte: #313949;

    /* Contorno de campo, botao secundario e outro controle de formulario.
       Separado de --cor-borda-forte porque a WCAG 1.4.11 exige 3:1 para o
       limite visual de um controle, e uma borda decorativa entre secoes nao
       tem essa obrigacao. Os dois valores foram medidos contra --cor-superficie. */
    --cor-borda-controle: #646d80;

    --cor-texto: #e8ebf2;            /* 16,1:1 sobre o fundo */
    --cor-texto-secundario: #9aa3b5; /*  7,7:1 */
    --cor-texto-terciario: #7c8698;  /*  5,3:1 */
    --cor-texto-invertido: #0a0d14;

    /* Accent unico: ambar/latao, remetendo a instrumento de navegacao.
       Serve tambem como cor de alerta e de destaque de marca. */
    --cor-accent: #d9a13b;
    --cor-accent-forte: #f0b757;
    --cor-accent-texto: #d9a13b;     /* 8,4:1 sobre o fundo */
    --cor-accent-contraste: #17120a;  /* texto sobre preenchimento accent */
    --cor-accent-suave: rgba(217, 161, 59, 0.13);
    --cor-accent-borda: rgba(217, 161, 59, 0.38);

    /* Verde e vermelho NUNCA sao cor de marca. Existem so para dado. */
    --cor-alta: #2fbf71;             /* 8,2:1 */
    --cor-alta-suave: rgba(47, 191, 113, 0.13);
    --cor-baixa: #e5484d;            /* 5,0:1 */
    --cor-baixa-suave: rgba(229, 72, 77, 0.13);
    --cor-neutra: var(--cor-texto-terciario);
    --cor-neutra-suave: rgba(124, 134, 152, 0.13);

    /* Informativo, sem carga de alta nem de baixa. */
    --cor-info: #5b9dd9;
    --cor-info-suave: rgba(91, 157, 217, 0.13);

    --cor-foco: #f0b757;
    --cor-selecao: rgba(217, 161, 59, 0.28);
    --cor-sobreposicao: rgba(4, 6, 10, 0.72);
    --cor-esqueleto: #1c2230;
    --cor-esqueleto-brilho: #262e3e;

    /* Impressao ignora o tema: papel e sempre branco. */
    --cor-impressao-fundo: #ffffff;
    --cor-impressao-texto: #000000;

    /* ----------------------------------------------------------------------
       TIPOGRAFIA
       ----------------------------------------------------------------------
       Inter variavel para interface. A pilha de fallback usa fonte de sistema
       para que a primeira pintura nunca fique sem texto.
       Numero SEMPRE com variante tabular, para a coluna nao dancar.
       ---------------------------------------------------------------------- */

    --familia-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --familia-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --fonte-2xs: 0.6875rem;  /* 11px - rotulo de eixo, metadado */
    --fonte-xs: 0.75rem;     /* 12px - rotulo de tabela, badge */
    --fonte-sm: 0.8125rem;   /* 13px - texto de apoio */
    --fonte-base: 0.875rem;  /* 14px - corpo da interface densa */
    --fonte-md: 1rem;        /* 16px - corpo de leitura */
    --fonte-lg: 1.25rem;     /* 20px - titulo de card */
    --fonte-xl: 1.625rem;    /* 26px - titulo de secao */
    --fonte-2xl: 2.125rem;   /* 34px - titulo de pagina */
    --fonte-3xl: 2.75rem;    /* 44px - numero de destaque */
    --fonte-4xl: 3.5rem;     /* 56px - chamada da landing */

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-semi: 600;
    --peso-forte: 700;

    --altura-linha-apertada: 1.15;
    --altura-linha-titulo: 1.25;
    --altura-linha-base: 1.5;
    --altura-linha-solta: 1.65;

    --espaco-letra-titulo: -0.02em;
    --espaco-letra-base: 0;
    --espaco-letra-rotulo: 0.06em;

    /* ----------------------------------------------------------------------
       ESPACAMENTO - escala em multiplos de 4px
       ---------------------------------------------------------------------- */

    --esp-0: 0;
    --esp-1: 0.25rem;   /*  4px */
    --esp-2: 0.5rem;    /*  8px */
    --esp-3: 0.75rem;   /* 12px */
    --esp-4: 1rem;      /* 16px */
    --esp-5: 1.25rem;   /* 20px */
    --esp-6: 1.5rem;    /* 24px */
    --esp-7: 1.75rem;   /* 28px */
    --esp-8: 2rem;      /* 32px */
    --esp-10: 2.5rem;   /* 40px */
    --esp-12: 3rem;     /* 48px */
    --esp-16: 4rem;     /* 64px */
    --esp-20: 5rem;     /* 80px */
    --esp-24: 6rem;     /* 96px */

    /* ----------------------------------------------------------------------
       RAIO, BORDA E SOMBRA
       ----------------------------------------------------------------------
       Sombra e recurso raro: separacao se faz com borda e superficie.
       Existe apenas para elemento que flutua sobre o conteudo.
       ---------------------------------------------------------------------- */

    --raio-sm: 4px;
    --raio-md: 6px;
    --raio-lg: 10px;
    --raio-xl: 14px;
    --raio-completo: 999px;

    --borda-fina: 1px;
    --borda-media: 2px;
    --borda-destaque: 3px;

    --sombra-sobreposicao: 0 16px 48px rgba(0, 0, 0, 0.55);
    --sombra-flutuante: 0 6px 20px rgba(0, 0, 0, 0.4);

    --desfoque-cabecalho: 12px;
    --desfoque-sobreposicao: 2px;

    /* Seta do <select>, desenhada com gradiente para nao depender de imagem. */
    --tamanho-seta-select: 5px;
    --deslocamento-seta-select: 2px;

    /* ----------------------------------------------------------------------
       MOVIMENTO - 150ms a 200ms, so em hover e mudanca de estado.
       Nao existe animacao de entrada de pagina.
       ---------------------------------------------------------------------- */

    --transicao-rapida: 150ms;
    --transicao-media: 200ms;
    --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
    --curva-padrao: cubic-bezier(0.4, 0, 0.2, 1);

    /* ----------------------------------------------------------------------
       MEDIDAS DE LAYOUT
       ---------------------------------------------------------------------- */

    --largura-maxima-conteudo: 1440px;
    --largura-maxima-estreita: 720px;
    --largura-maxima-texto: 68ch;
    --largura-barra-lateral: 232px;
    --largura-barra-lateral-recolhida: 60px;
    --altura-cabecalho: 56px;
    --altura-barra-inferior: 56px;
    --altura-controle: 36px;
    --altura-controle-grande: 44px;
    --altura-linha-tabela: 44px;

    /* Largura minima de card antes de o grid quebrar para menos colunas.
       Cada tipo de card tem a sua porque o conteudo e diferente: um card de
       metrica cabe em 220px, um de noticia com titulo de tres linhas nao. */
    --largura-minima-card-metrica: 220px;
    --largura-minima-card: 300px;
    --largura-minima-card-noticia: 320px;
    --largura-minima-card-metrica-larga: 260px;
    --largura-minima-amostra-cor: 150px;

    /* Campo da barra de filtros. Abaixo disso o rotulo e o texto do <select>
       comecam a truncar, entao o grid prefere quebrar para menos colunas. */
    --largura-minima-campo-filtro: 190px;

    /* Abaixo desta largura a tabela de ativos rola na horizontal em vez de
       comprimir as colunas de numero. */
    --largura-minima-tabela: 640px;

    --largura-maxima-busca: 420px;
    --altura-maxima-autocomplete: 320px;
    --largura-modal: 520px;
    --largura-toast: 380px;
    --altura-grafico: 280px;
    --altura-grafico-alto: 420px;
    --tamanho-miniatura-noticia: 96px;
    /* No telefone o slide ocupa a coluna inteira. Peek do proximo card
       deslocava o bloco para a esquerda e fingia margem desigual. */
    --largura-slide-carrossel: 100%;
    --largura-rotulo-token: 128px;

    /* Alvo minimo de toque, para acessibilidade em telas pequenas. */
    --alvo-toque-minimo: 44px;

    /* ----------------------------------------------------------------------
       CAMADAS
       ---------------------------------------------------------------------- */

    --z-base: 1;
    --z-barra-lateral: 20;
    --z-cabecalho: 30;
    --z-barra-inferior: 35;
    --z-autocomplete: 40;
    --z-sobreposicao: 50;
    --z-modal: 60;
    --z-toast: 70;
}

/* ==========================================================================
   TEMA CLARO
   ==========================================================================
   Completo, nao um degrade do escuro. Verde e vermelho ficam mais escuros
   porque precisam de contraste sobre superficie clara: o mesmo #2fbf71 do
   tema escuro renderiza 2,3:1 sobre branco, o que reprova em AA.
   ========================================================================== */

[data-tema='claro'] {
    color-scheme: light;

    --cor-fundo: #f5f6f9;
    --cor-superficie: #ffffff;
    --cor-superficie-elevada: #ffffff;
    --cor-superficie-afundada: #eceef3;

    --cor-borda: #dfe3ea;
    --cor-borda-forte: #c3c9d4;
    /* 3,8:1 sobre a superficie branca e 3,3:1 sobre a superficie afundada,
       que e o fundo real do campo e o pior caso deste token. */
    --cor-borda-controle: #7a8397;

    --cor-texto: #101521;            /* 16,9:1 sobre o fundo */
    --cor-texto-secundario: #4d5666; /*  6,9:1 */
    /* 4,8:1 sobre a superficie afundada, que e o fundo de campo e o pior caso
       deste token. Um tom mais claro reprovaria justamente ali. */
    --cor-texto-terciario: #5f6877;
    --cor-texto-invertido: #ffffff;

    /* O ambar do tema claro mantem texto ESCURO por cima, como no tema escuro.
       Com texto branco, nenhum ambar reconhecivel como ambar chega a 4,5:1:
       teria de escurecer ate virar marrom. */
    --cor-accent: #c98f22;
    --cor-accent-forte: #ab7714;
    --cor-accent-texto: #8a5d0b;     /* 5,8:1 sobre a superficie */
    --cor-accent-contraste: #17120a; /* 6,6:1 sobre o preenchimento accent */
    --cor-accent-suave: rgba(180, 125, 22, 0.13);
    --cor-accent-borda: rgba(154, 106, 15, 0.42);

    --cor-alta: #0f7a44;             /* 5,0:1 */
    --cor-alta-suave: rgba(15, 122, 68, 0.11);
    --cor-baixa: #c2222b;            /* 5,5:1 */
    --cor-baixa-suave: rgba(194, 34, 43, 0.11);
    --cor-neutra: var(--cor-texto-terciario);
    --cor-neutra-suave: rgba(95, 104, 119, 0.11);

    --cor-info: #1b6aa8;
    --cor-info-suave: rgba(27, 106, 168, 0.11);

    --cor-foco: #96650c;
    --cor-selecao: rgba(180, 125, 22, 0.22);
    --cor-sobreposicao: rgba(16, 21, 33, 0.44);
    --cor-esqueleto: #e6e9ef;
    --cor-esqueleto-brilho: #f2f4f8;

    /* No claro a borda sozinha resolve menos, entao a sombra fica um pouco
       mais presente em elemento flutuante. */
    --sombra-sobreposicao: 0 16px 48px rgba(16, 21, 33, 0.18);
    --sombra-flutuante: 0 4px 16px rgba(16, 21, 33, 0.1);
}