/* =================================================================== AURA THEME — Tokens e estilos globais Versão 2.0 — Design System 2026 Este arquivo define a base visual de todas as páginas da Aura. Ele NÃO modifica JavaScript, Supabase, rotas, textos ou regras de acesso. Apenas substitui valores repetidos por variáveis CSS e aplica a identidade oficial da marca. Princípio desta rodada: TROCAR A PELE, NÃO O SISTEMA NERVOSO. Os NOMES de token continuam os mesmos — centenas de usos nas páginas dependem deles. O que muda são os VALORES. Reapontar --aura-white para Lavender Mist e --aura-black para Evergreen aplica a direção de arte inteira sem tocar em uma linha de marcação. Distribuição alvo (AURA_DESIGN_SYSTEM_2026 §4): 40–55% Lavender Mist · 25–35% Evergreen · 10–18% Dark Green · até 10% Deep Purple · até 8% Amber Earth. =================================================================== */ /* ------------------------------------------------------------------- FONTES DA MARCA Os arquivos ficam hospedados no próprio projeto, em midia/fontes/. local() vem primeiro: se a pessoa já tem a fonte no sistema, nada é baixado. O arquivo é o segundo recurso. Ambas são variáveis (um arquivo cobre toda a faixa de peso), o que atende os pesos usados no projeto sem baixar um arquivo por peso. Subconjunto latino apenas: 47 KB + 19 KB. Servidas de 'self', o que o CSP da Aura já permite (font-src 'self'). Nenhuma requisição a servidor externo, nenhum dado de quem usa o aplicativo enviado ao Google. Licença: SIL Open Font License 1.1 (ambas). Uso e redistribuição permitidos, inclusive comercial. A FRAUNCES SAIU DA LINGUAGEM PRINCIPAL ------------------------------------------------------------------- O DS 2026 tem uma fonte de texto — Inter — e uma de microtipografia — Fira Code. Não há serifada na direção nova: o efeito editorial vem de peso, tamanho, tracking e composição, não de um desenho de letra que faz o trabalho sozinho. A declaração da Fraunces fica, sem ser referenciada por --font-display, porque o arquivo continua publicado e removê-la não traria ganho nenhum a quem já a tem em cache. ------------------------------------------------------------------- */ @font-face { font-family: "Fraunces"; src: local("Fraunces"), url("/midia/fontes/fraunces-latin.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: local("Inter"), url("/midia/fontes/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* A técnica. Entra em doses pequenas: eyebrow, metadata, data, categoria, numeração, rótulo, microação. Nunca em parágrafo. */ @font-face { font-family: "Fira Code"; src: local("Fira Code"), url("/midia/fontes/fira-code-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------- TOKENS DE DESIGN (variáveis CSS) ------------------------------------------------------------------- */ :root { /* === PALETA OFICIAL 2026 === * Cinco nomes próprios, e nada além deles. Tudo o mais nesta folha * aponta para cá — inclusive os tokens antigos, logo abaixo. * * Evergreen a cor âncora. Estrutura, hierarquia, o que chama * atenção. É ela que segura a interface. * Dark Green a segunda superfície escura. * Lavender Mist a superfície clara, e o respiro. * Amber Earth o acento vivo. * Deep Purple o contraste forte, e pontual. */ --aura-evergreen: #012622; --aura-dark-green: #003836; --aura-lavender: #ECE5F0; --aura-amber: #E98A15; --aura-purple: #59114D; /* Tinta de texto: o próprio Evergreen. A direção pede contraste forte, e rebaixar a tinta para um tom intermediário seria andar na direção contrária — além de introduzir o cinza que o sistema não tem. Sobre Lavender Mist dá 13.1:1. */ --aura-ink: var(--aura-evergreen); /* Tinta sobre as superfícies escuras e sobre o âmbar. Lavender Mist em vez de branco puro: mantém a interface dentro da paleta e não abre um buraco branco no meio de um cartão. Sobre Evergreen 13.1:1, sobre Dark Green 10.5:1, sobre Roxo 10.6:1. */ --aura-sobre-escuro: var(--aura-lavender); /* Nome antigo, mantido porque as páginas ainda o citam. */ --aura-sobre-navy: var(--aura-sobre-escuro); /* === Cores base (papéis, não cores) === * Os NOMES continuam --aura-black e --aura-white porque centenas de * usos dependem deles nas páginas. Trocar os nomes seria reescrever * tudo; trocar os VALORES aplica a direção de arte inteira sem tocar * em marcação nenhuma. * * --aura-white é SUPERFÍCIE, --aura-black é TINTA. É o que permite a * troca de tema, mais abaixo, trocar os dois de lado. */ --aura-black: var(--aura-evergreen); --aura-white: var(--aura-lavender); /* === Pontes da paleta anterior === * Estes nomes continuam vivos nas páginas. Reapontá-los é o que faz a * identidade nova chegar a todas elas sem tocar em marcação. * * Sapphire virou Deep Purple de propósito: ele aparece em poucos * lugares — o avatar do Perfil, os símbolos dos cartões de conta — e é * exatamente ali que um contraste forte e pontual funciona. */ --aura-navy: var(--aura-evergreen); --aura-sapphire: var(--aura-purple); --aura-champagne: var(--aura-lavender); --aura-taupe: var(--aura-lavender-fundo); --aura-ivory: var(--aura-lavender); --aura-gold: var(--aura-amber); --aura-summer-green: var(--aura-dark-green); --aura-soft-lavender: var(--aura-purple); --aura-limoncelo: var(--aura-amber); /* Tinta que NÃO inverte. Para uso sobre cores de marca (que também não invertem) e para superfícies que devem permanecer escuras nos dois temas. Se você precisar de tinta que acompanhe o tema, o token é --aura-black. */ --aura-tinta-fixa: var(--aura-evergreen); /* === Alias semânticos === */ --aura-success: var(--aura-dark-green); --aura-accent-cosmos: var(--aura-purple); --aura-accent-romance: var(--aura-purple); --aura-cta: var(--aura-amber); /* === O âmbar, e a regra de uso === * Até 8% da tela. Ação relevante, estado especial, informação rara, * detalhe de destaque, um cartão estratégico. O acento deve parecer * INTENCIONAL, não decorativo. * * O #E98A15 é cor de SUPERFÍCIE: tinta Evergreen sobre ele dá 6.2:1, * e ele sobre Evergreen também. O que ele não é, é texto sobre claro — * sobre Lavender Mist fica em 2.1:1. Daí a variante funda, para quando * o âmbar precisa ser LIDO num fundo claro: 4.6:1. */ --aura-ouro: var(--aura-amber); --aura-ouro-fundo: #9C5400; --aura-ouro-tenue: rgba(233, 138, 21, 0.14); /* === Superfícies claras === * Três níveis, todos da família da lavanda. Não há cinza aqui: o que * separa um nível do outro é quanto de luz o tom tem, não quanto de * saturação ele perdeu. * * --aura-elevado o que está por cima #F7F4F9 * --aura-white a página #ECE5F0 * --aura-soft o que está encaixado #DCD1E4 (campos, blocos) */ --aura-lavender-alto: #F7F4F9; --aura-lavender-fundo: #DCD1E4; --aura-muted: rgba(1, 38, 34, 0.62); --aura-soft: var(--aura-lavender-fundo); --aura-elevado: var(--aura-lavender-alto); /* === Bordas === * Discretas. Quando a cor de fundo já cria separação suficiente, a * borda pode simplesmente desaparecer. */ --aura-linha: rgba(1, 38, 34, 0.14); --aura-linha-forte: rgba(1, 38, 34, 0.24); --aura-border: 1px solid var(--aura-linha); --aura-border-forte: 1px solid var(--aura-linha-forte); --aura-border-light: 1px solid rgba(236, 229, 240, 0.22); /* === Raios === * ~90% dos elementos quadrados ou quase. 4px no geral, 2px no que é * pequeno. A pílula é exceção, e só onde a forma circular tem função: * seletor de estado, toggle, chip que precisa parecer cápsula. * * Os cinco nomes antigos convergem porque a direção nova não tem mais * cinco geometrias diferentes — tem uma. Continuam existindo para não * quebrar as páginas que os citam. */ --aura-raio-controle: 4px; --aura-raio-pilula: 999px; --aura-raio-cartao: 4px; --aura-raio-campo: 4px; --aura-raio-mini: 2px; --aura-raio-folha: 4px; /* === Profundidade === * Os cartões parecem levemente descolados do fundo. A interface não é * chapada e também não tem glow: a sombra é Evergreen diluído, na * direção da luz, e some quando não há o que elevar. */ --aura-shadow: 0 14px 34px rgba(1, 38, 34, 0.13), 0 3px 8px rgba(1, 38, 34, 0.08); --aura-shadow-raised: 0 18px 42px rgba(1, 38, 34, 0.18), 0 5px 12px rgba(1, 38, 34, 0.10); /* === Espaçamento === */ --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 14px; --space-5: 18px; --space-6: 24px; --space-7: 32px; --space-8: 44px; --aura-page-x: 14px; --aura-card-gap: 10px; /* === Sombras internas === * * A gramática é simples e vale para o aplicativo inteiro: * * sombra EXTERNA o elemento está elevado, acima da página; * sombra INTERNA a área é de interação, seleção ou conteúdo * encaixado — está abaixo da superfície. * * A Aura não usa sombra externa em lugar nenhum: a elevação aqui é * feita com traço preto de 1px. Então a sombra interna não disputa * com nada — ela só marca "aqui se digita, aqui se escolhe". * * A cor é preto puro, na intensidade de cada nível. A paleta da Aura * é preto, branco e três acentos: uma sombra preta é a única que não * introduz matiz nenhuma. A versão anterior usava azul-marinho a 10% * e escurecia a primeira linha em 12,7 níveis de 255 — 5%, dissolvido * em 8px de desfoque. Existia no computado e não se via. * * soft campos: onde se digita. Fundo pousado. * surface faixas e painéis encaixados, que são áreas maiores e * precisam de mais profundidade para ler como recuo. * active campo em uso. Só para os estados de foco, que combinam * este valor com o indicador de foco da própria página. */ --aura-inset-soft: inset 0 2px 6px rgba(1, 38, 34, 0.12); --aura-inset-surface: inset 0 3px 9px rgba(1, 38, 34, 0.16); --aura-inset-active: inset 0 3px 9px rgba(1, 38, 34, 0.17); /* A pastilha ativa das abas. Estava repetida em quatro páginas com o mesmo valor e numa quinta com 0.12 — divergência sem intenção. */ --aura-sombra-pilula: 0 1px 3px rgba(1, 38, 34, 0.14); /* === Contrato do menu universal === * * O menu vive em Shadow DOM e não enxerga as regras da página — só * herda propriedades personalizadas. Estas quatro são o contrato: o * Light DOM as define, o componente as consome, e nenhuma lógica de * tema entra dentro dele. * * Existem como nomes próprios, e não como --aura-white direto, por um * motivo prático: o menu precisa da SUPERFÍCIE, e ler --aura-white lá * dentro esconderia essa intenção. Quem mexer no componente amanhã lê * "fundo do menu" e não precisa saber que branco virou papel. * * Não precisam de bloco no tema escuro: apontam para tokens que já * trocam de lado sozinhos. */ --aura-menu-fundo: var(--aura-white); --aura-menu-tinta: var(--aura-muted); --aura-menu-ativo: var(--aura-ouro-fundo); --aura-menu-linha: var(--aura-linha); /* === Tipografia === * * Uma família para tudo o que se lê, outra para o que se etiqueta. * * --font-display continua existindo e continua sendo usado em dezenas * de títulos pelas páginas — só que agora aponta para a MESMA Inter. * O caráter editorial passa a vir do peso e do tracking negativo que * cada título já declara, não de uma serifada. * * Pesos preferenciais: 430–450 texto · 520–560 título grande · * 580–620 título de cartão · 700–750 marca. Nunca 900. */ --font-body: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-body); --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace; /* === Layout === */ --app-max-width: 440px; --app-wide-max-width: 520px; --bottom-menu-height: 104px; --topbar-height: 64px; /* === Transições === */ --transition-fast: 160ms ease; --transition-base: 260ms cubic-bezier(.22, 1, .36, 1); /* === Safe areas === */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Pisos de respiro: o DS pede 12px no topo e 20px embaixo mesmo em aparelho sem recorte. */ --aura-safe-top: max(12px, env(safe-area-inset-top, 0px)); --aura-safe-bottom: max(20px, env(safe-area-inset-bottom, 0px)); } /* ------------------------------------------------------------------- NOITE — a mesma Aura, do outro lado Dois casos caem aqui: a pessoa escolheu o tema escuro, OU o tema é claro mas ESTA página é escura por direção de arte. O segundo dá o ritmo de revista: a alternância é a assinatura, não um bug. No tema escuro a distinção some — tudo é noite, porque duas profundidades de escuro na mesma sessão pareceriam descuido. Não é inversão automática, e o DS é explícito quanto a isso: não basta trocar preto por branco. - a identidade permanece verde. O fundo é o próprio Evergreen — a cor âncora do sistema, e não um preto genérico; - a segunda superfície escura é o Dark Green, exatamente como a direção define. Nada vira cinza no caminho; - o âmbar volta a ser o tom puro, porque sobre Evergreen ele finalmente tem contraste para ser lido (6.2:1); - o roxo continua sendo o contraste pontual, e não inverte; - a profundidade continua existindo: sobre fundo escuro a sombra difusa some, então ela escurece. ------------------------------------------------------------------- */ :root[data-tema="escuro"], :root[data-tema="claro"][data-superficie="escura"], :root:not([data-tema])[data-superficie="escura"] { --aura-black: var(--aura-lavender); --aura-white: var(--aura-evergreen); --aura-ink: var(--aura-lavender); --aura-muted: rgba(236, 229, 240, 0.62); /* Dark Green é a segunda superfície escura — é o papel que a direção dá a ele. O nível elevado ganha um passo a mais de luz, na mesma matiz: verde mais claro, nunca cinza. */ --aura-soft: var(--aura-dark-green); --aura-elevado: #013F3B; /* --aura-evergreen, --aura-dark-green, --aura-lavender, --aura-amber e --aura-purple NÃO aparecem aqui, e é de propósito. ------------------------------------------------------------------- A paleta se divide em duas famílias, e a divisão é o que faz o tema escuro funcionar: PAPÉIS, que trocam de lado com o tema --aura-white superfície da página --aura-black tinta --aura-soft superfície secundária --aura-elevado superfície elevada --aura-ink, --aura-muted, --aura-linha CORES DE MARCA, que nunca invertem --aura-evergreen, --aura-dark-green, --aura-lavender, --aura-amber, --aura-purple e todas as pontes que apontam para elas (--aura-navy, --aura-sapphire, --aura-gold…) Uma tela que precisa de "superfície secundária" quer --aura-soft, não --aura-lavender: o primeiro vira Dark Green no escuro, o segundo continua lavanda. Inverter as cores de marca produziria o pior dos dois mundos — metade da tela acompanhando o tema e a outra metade não. */ --aura-linha: rgba(236, 229, 240, 0.14); --aura-linha-forte: rgba(236, 229, 240, 0.26); --aura-border: 1px solid var(--aura-linha); --aura-border-forte: 1px solid var(--aura-linha-forte); --aura-border-light: 1px solid rgba(1, 38, 34, 0.24); --aura-ouro-fundo: var(--aura-amber); --aura-ouro-tenue: rgba(233, 138, 21, 0.18); --aura-shadow: 0 16px 36px rgba(0, 0, 0, 0.34), 0 4px 12px rgba(0, 0, 0, 0.20); --aura-shadow-raised: 0 22px 48px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.24); --aura-inset-soft: inset 0 2px 7px rgba(0, 0, 0, 0.38); --aura-inset-surface: inset 0 3px 10px rgba(0, 0, 0, 0.46); --aura-inset-active: inset 0 3px 10px rgba(0, 0, 0, 0.46); } /* ------------------------------------------------------------------- RESET GLOBAL ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* MOBILE-FIRST, NA BASE ------------------------------------------------------------------- O piso é 320px. Nenhuma página da Aura pode nascer para o desktop e ser espremida depois: a composição começa no celular e o tablet REORGANIZA, o desktop EXPANDE — nunca é o mesmo desenho ampliado. min-width no html além do body porque um filho teimoso empurra o documento inteiro e cria rolagem horizontal; o piso declarado nos dois evita que o estouro se propague. */ html { min-width: 320px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; background: var(--aura-white); } body { min-width: 320px; min-height: 100vh; min-height: 100dvh; background: var(--aura-white); color: var(--aura-ink); font-family: var(--font-body); font-weight: 430; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* === Elementos de formulário === */ button, input, select, textarea { font: inherit; color: inherit; } button { border: 0; background: transparent; cursor: pointer; } /* === Onde se digita, afunda === * * Um lugar só, para todo o aplicativo: a alternativa seria repetir a * mesma linha em nove páginas e ver as nove saírem de sincronia. * * A lista de :not() existe porque `input` é um elemento com muitas * vidas. Só entram os que recebem texto: * * checkbox e radio ficam escondidos e desenhados por um * irmão — a sombra iria no elemento invisível; * file o de cosmos tem 1px e opacidade zero; * button, submit, * reset, image são botões, e botão é elevado, não encaixado; * range, color têm desenho próprio do navegador, que a sombra * atravessaria de forma imprevisível; * hidden não desenha nada. * * Nada de dimensão muda: box-shadow não ocupa espaço no layout e não * participa do cálculo de largura, altura ou posição. * * Quem tem regra de foco própria combina o inset com ela na própria * página — box-shadow não soma entre regras, a de maior especificidade * substitui a outra por inteiro. */ /* O :where() em volta dos :not() é o detalhe que faz isto funcionar. * * Escrita solta, a cadeia `input:not([type=a]):not([type=b])…` soma a * especificidade de CADA :not(): dez deles dão (0,10,1) — mais forte * que `.field input:focus`, que é (0,2,1). A regra global passaria por * cima dos anéis de foco das páginas e apagaria o indicador de * acessibilidade, silenciosamente. * * :where() vale zero. Assim a lista continua selecionando o que deve, e * a regra inteira pesa (0,0,1) — qualquer regra de página vence dela, * que é exatamente o que se quer de um padrão: valer por omissão, nunca * por imposição. */ input:where( :not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not([type="hidden"]) ), select, textarea { box-shadow: var(--aura-inset-soft); } /* Campo desabilitado não é área de interação: sem convite, sem sombra. * Também em :where(), para não voltar a competir com as páginas. */ input:where(:disabled), select:where(:disabled), textarea:where(:disabled) { box-shadow: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* === O atributo hidden precisa vencer os resets acima === * * A regra `img { display: block }` logo acima é de AUTOR; o * `[hidden] { display: none }` que esconde o atributo vem da folha do * NAVEGADOR. Autor vence navegador — então toda do projeto * estava sendo exibida, com o atributo hidden ali, escrito, sem efeito * nenhum. * * Quando a imagem ainda não tem src — foto de perfil de quem nunca * enviou uma, avatar antes de os dados chegarem — o que aparece é o * ícone de imagem ausente com o texto alternativo ao lado, cortado pelo * tamanho do contêiner. Num círculo de 42px, "Sua foto de perfil" vira * um rabisco; num de 34px, "Logo Aura" vira "Logo". * * !important aqui não é atalho: é a única forma de um seletor de * atributo, com especificidade menor, vencer resets de elemento que já * existem e que outras telas dependem. Vale para qualquer elemento, não * só imagem — o mesmo problema atinge