/* ═══════════════════════════════════════════════════════════════ 01-tema.css — Tokens do tema: vidro neutro, cor só nos números ─────────────────────────────────────────────────────────────── A REGRA QUE ORGANIZA ESTE ARQUIVO A interface é neutra. Cinza, vidro, tinta. Cor aqui dentro significa UMA coisa e só uma: um número que mudou de estado — verde deu certo, vermelho não deu, âmbar merece atenção. Isso não é gosto: numa tela que existe para ler resultado, cor gasta em enfeite é cor que não sobra para o dado. Quando o botão de "Visão Geral" era laranja e o ROAS ruim também era vermelho, o olho tinha que decidir qual dos dois importava. Por isso `--meta`, que era laranja e pintava metade do painel, virou grafite. O nome ficou porque 3.100 linhas de CSS e 68 arquivos JS o chamam — trocar o VALOR muda o painel inteiro; trocar o NOME quebraria tudo. ─────────────────────────────────────────────────────────────── TIPOGRAFIA: por que continua Plus Jakarta Sans O visual da Apple vem muito mais da ESCALA (tamanho, entrelinha, peso, hierarquia) do que da fonte em si. A escala está aplicada em `08-vidro.css`. Trocar a família por SF Pro exigiria uma fonte nova pela rede num app que roda em localhost e precisa abrir offline — custo real, ganho pequeno. ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); /* ══════════════════════════════════════════════════════════════ TEMA ESCURO (padrão) ══════════════════════════════════════════════════════════════ */ :root { /* ── A cor de ação: grafite, não laranja ────────────────────── Antes era #E85D20. O destaque agora é feito por CONTRASTE e PROFUNDIDADE (vidro mais claro, borda mais viva, texto mais branco), que é como a Apple resolve estado ativo sem gastar cor. */ --meta:#E8E8ED; --meta-dim:rgba(255,255,255,0.08); --meta-l:#FFFFFF; --meta-d:#9A9AA2; /* ── As únicas cores do sistema: estado de um número ────────── Ajustadas para passar 4.5:1 sobre o vidro escuro. */ --green:#32D74B; --green-dim:rgba(50,215,75,0.14); --yellow:#FFD426; --yellow-dim:rgba(255,212,38,0.14); --red:#FF453A; --red-dim:rgba(255,69,58,0.14); --purple:#BF5AF2; /* ── Fundos ─────────────────────────────────────────────────── `--bg` é o único opaco de verdade. Todo o resto é vidro: uma película clara POR CIMA do fundo, não uma cor própria. É o que faz a profundidade funcionar quando um painel passa por cima de outro. */ --bg:#08080A; --bg2:rgba(8,8,10,0); --card:rgba(255,255,255,0.055); --card2:rgba(255,255,255,0.085); --sidebar-bg:rgba(255,255,255,0.035); /* ── Tinta ──────────────────────────────────────────────────── Quatro níveis, como os `label` da Apple: primário, secundário, terciário e o quase-invisível de divisória. */ --text:#F5F5F7; --muted:#6E6E73; --muted2:#A1A1A8; --border:rgba(255,255,255,0.12); --border2:rgba(255,255,255,0.06); /* ── Vidro ──────────────────────────────────────────────────── Três espessuras, na mesma ideia dos materiais do iOS: quanto mais alta a camada, mais opaca — para o conteúdo de baixo virar textura, não distração. */ --vidro-fino:rgba(255,255,255,0.045); --vidro:rgba(255,255,255,0.075); --vidro-denso:rgba(28,28,30,0.82); --vidro-blur:saturate(180%) blur(22px); --vidro-borda:rgba(255,255,255,0.12); --vidro-brilho:rgba(255,255,255,0.16); /* fio de luz na borda de cima */ /* ── Elevação ───────────────────────────────────────────────── Sombra difusa e larga, nunca dura. Sombra dura desenha caixa; sombra difusa desenha distância. */ --sombra-1:0 1px 2px rgba(0,0,0,.28); --sombra-2:0 6px 20px rgba(0,0,0,.34); --sombra-3:0 22px 60px rgba(0,0,0,.52); /* ── Cantos concêntricos ────────────────────────────────────── R_externo = R_interno + margem. É a regra que faz cartão dentro de cartão parecer encaixado em vez de empilhado. */ --r-xl:22px; --r-lg:16px; --r-md:11px; --r-sm:8px; --r-pill:999px; /* ── Movimento ──────────────────────────────────────────────── Curva de mola: sai rápido, chega devagar, com um respiro no fim. Linear parece máquina. */ --mola:cubic-bezier(.32,.72,0,1); --t-rapido:.18s; --t-normal:.32s; --sidebar:260px; --drawer:410px; /* Compatibilidade: nomes que o CSS antigo ainda chama. */ --glow-meta:0 0 0 1px rgba(255,255,255,0.14); --glow-green:0 0 20px rgba(50,215,75,0.18); --champ-gold:#FFD426; --champ-silver:#A1A1A8; --champ-bronze:#D9762B; /* ── O ÚNICO FUNDO OPACO ALÉM DE `--bg` ─────────────────────── O tema inteiro é feito de VIDRO: `--card2` é `rgba(255,255,255,0.085)`, uma película clara que só vira cinza escuro quando composta sobre `--bg`. Isso funciona dentro da página e QUEBRA fora dela. A lista que abre num `