/* Gerimos — único override sobre o Pico classless. Normativo: docs/ui-padroes.md (dimensões/comportamento) e docs/identidade-visual.md (tokens). */ @font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url("../fonts/ibm-plex-sans-600.196e3cbc5fee.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "IBM Plex Mono"; font-weight: 500; src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2"); font-display: swap; } /* :root:not(...) espelha a especificidade dos temas do Pico — :root puro perde a cascata */ :root:not([data-theme=dark]) { --bg: #f5f5f4; --surface: #ffffff; --ink: #1c1917; --ink-2: #44403c; --muted: #66605a; --line: #d6d3d0; --primary: #0f766e; --primary-soft: #e0f0ee; --chart-bar: #8ac3bd; /* primária do Pico = teal da marca (links, botões, focus) */ --pico-primary: var(--primary); --pico-primary-background: var(--primary); --pico-primary-border: var(--primary); --pico-primary-underline: var(--primary); --pico-primary-hover: #0c5f59; --pico-primary-hover-background: #0c5f59; --pico-primary-hover-border: #0c5f59; --pico-primary-hover-underline: #0c5f59; --pico-primary-inverse: #ffffff; --pico-primary-focus: rgba(15, 118, 110, 0.3); /* formulários nos neutros quentes da identidade (nada de azulado) */ --pico-background-color: var(--bg); --pico-form-element-background-color: var(--surface); --pico-form-element-border-color: var(--line); --pico-form-element-placeholder-color: var(--muted); --pico-form-element-active-border-color: var(--primary); --pico-form-element-focus-color: var(--pico-primary-focus); --pico-muted-color: var(--muted); --pico-muted-border-color: var(--line); } /* Light é o padrão (data-theme="light" no ); dark só via toggle dev. TODO: oferecer dark mode como opção do usuário em Minha conta. */ :root[data-theme=dark] { --bg: #171614; --surface: #201f1c; --ink: #ece9e4; --ink-2: #b8b3ad; --muted: #8a857d; --line: #35322d; --primary: #14b8a6; --primary-soft: #123b37; --chart-bar: #2f5f5b; /* botões sólidos mantêm petróleo com texto branco (identidade §Paleta dark) */ --pico-primary: var(--primary); --pico-primary-underline: var(--primary); --pico-primary-hover: #2dd4bf; --pico-primary-hover-underline: #2dd4bf; --pico-primary-background: #0f766e; --pico-primary-border: #0f766e; --pico-primary-hover-background: #0c5f59; --pico-primary-hover-border: #0c5f59; --pico-primary-inverse: #ffffff; --pico-primary-focus: rgba(20, 184, 166, 0.35); --pico-background-color: var(--bg); --pico-form-element-background-color: var(--bg); --pico-form-element-border-color: var(--line); --pico-form-element-placeholder-color: var(--muted); --pico-form-element-active-border-color: var(--primary); --pico-form-element-focus-color: var(--pico-primary-focus); --pico-muted-color: var(--muted); --pico-muted-border-color: var(--line); } /* ---------- base ---------- */ html { background: var(--bg); /* mata o escalonamento responsivo do Pico (§1 do ui-padroes): 1rem = 16px em qualquer viewport e em qualquer tema (o var --pico-font-size não cobre o dark) */ font-size: 16px; } body { background: var(--bg); color: var(--ink); font-size: 0.9375rem; } h1, h2, h3, .wordmark { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; color: var(--ink); } h1 { font-size: 1.375rem; } h2 { font-size: 1rem; } /* Dinheiro em Plex Mono tabular (identidade), mas sem nada que o destaque além da família: tamanho herdado da tabela e peso do corpo. O peso 500 fica no KPI de card, onde o destaque é o ponto (rodada 7, Passo 2 — o dono lia a coluna de valores como "fonte de outro app"). */ td.num, .valor { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } .valor { font-weight: 500; } .wordmark { color: var(--ink); text-decoration: none; font-size: 1.375rem; } .wordmark .ponto { color: var(--primary); } footer { padding: 1rem 1.5rem; color: var(--muted); font-size: 0.9375rem; text-align: center; } /* divisória do footer recuada das bordas (§4) — mesmo tratamento em todas as telas */ footer small { display: block; max-width: 720px; margin: 0 auto; padding-top: 1rem; border-top: 1px solid var(--line); } .mensagens, ul.errorlist, .mensagens.erro { list-style: none; padding: 0; margin: 0 0 1rem; } /* mesmo padrão de notificação da app também para erros de formulário (allauth/Django) */ .mensagens li, ul.errorlist li, .mensagens.erro li { list-style: none; background: var(--primary-soft); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.9375rem; } /* sucesso some sozinho após 6s (rascunho §3); erro/warning ficam até o usuário resolver */ .mensagens li.success { background: #ddf3dd; color: #086108; border-color: #0ca30c; animation: sumir-banner 0.4s ease 6s forwards; } .mensagens li.error { background: #fbe1e1; color: #a02020; border-color: #d03b3b; } .mensagens li.warning { background: #fdf3d7; color: #7a5a00; border-color: #fab219; } /* texto de erro avulso fora de .mensagens (verificador, aceite público) — mesmo tom de status */ .erro { color: #a02020; } /* botão de ação secundária (Cancelar, +Adicionar) — contorno, sem competir com o CTA primário */ .secundario { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); } .secundario:hover { border-color: var(--primary); color: var(--primary); } /* link de ação de seção (Decisão C): "+ Template", "+ Cobrança eventual" etc — sublinhado em --primary, sem borda/fundo; substitui .secundario nessas ações. Aplica a e