/* ========================================================= FONTES — dentro do app (pasta fontes/), sem Google Fonts. Arapey e Instrument Serif: licença SIL OFL (fontes/OFL-*.txt). Voyage (títulos) e Helvetica Neue LT Pro: fontes PAGAS da marca — só entram com licença WEB (a de computador não vale para site). Helvetica Neue já vem no iPhone e no Mac; a Voyage entra aqui quando a licença web existir. ========================================================= */ @font-face{font-family:"Arapey";src:url(fontes/arapey-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Arapey";src:url(fontes/arapey-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Instrument Serif";src:url(fontes/instrument-serif-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Instrument Serif";src:url(fontes/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap} /* ========================================================= CONEXÃO BERLIM — Design tokens (app-guia) Contrastes medidos (WCAG AA). Não usar hex solto no código. ========================================================= */ :root{ /* ---------- MARCA (manual da Conexão Berlim, Studio Nama, v2.0 mai/2025) ---------- Pedido dela (24/09/2026): NADA de verde com amarelo — parece a bandeira do Brasil. O destaque é o CIDRA (#B0B094), da própria paleta; o dourado saiu. Em Ajustes → Cores da marca ela troca principal e destaque dentro da paleta do manual (cores.js); estes são os valores de fábrica. */ --brand-primaria: #293629; /* MOOS · a cor dela */ --brand-assinatura: #293629; /* selo e logo sobre fundo claro (no escuro vira o Cidra) */ --brand-cidra: #B0B094; /* CIDRA · o destaque: preenchimento com texto escuro */ --brand-oro: var(--brand-cidra); /* nome antigo (splash, pílulas) */ --brand-offwhite: #E8E3DE; --brand-sand: #E0D6C7; --brand-iron: #A3452B; /* IRON · o botão terracota do site dela */ --brand-preto: #171717; /* CHARCOAL */ /* nomes antigos do app-guia: o código ainda chama por eles */ --brand-verde: var(--brand-primaria); --brand-amarelo: var(--brand-assinatura); /* ---------- FUNDOS ---------- */ --paper: #E8E3DE; /* OFFWHITE do manual — o fundo do app */ --surface: #F6F3EF; /* cartões: um passo mais claro que o fundo */ --surface-2: #E0D6C7; /* SAND — blocos secundários */ --surface-3: #D3C8B6; --line: #D6CEC3; --line-2: #C2B8A9; /* ---------- TEXTO ---------- */ --ink: #171717; /* 14.1:1 sobre o fundo */ --ink-2: #3A3F3A; /* corpo secundário · 8.4:1 */ --ink-3: #5A5E58; /* legendas · 5.2:1 (4.6:1 sobre o sand) — mínimo */ /* ---------- AÇÃO ---------- */ --accent: var(--brand-primaria); --accent-ink: #F6F3EF; /* texto sobre o moos · 11.5:1 */ --accent-wash: #D8DDD3; /* fundo de pílula · moos por cima = 9.2:1 */ --accent-line: #B4BDB0; /* Destaque (Cidra): preenchimento com texto escuro */ --highlight: var(--brand-cidra); --highlight-ink: #171717; /* 8.1:1 sobre o cidra */ --highlight-wash: #E4E4D8; --highlight-text: #4E4E36; /* cidra escuro para texto · 6.7:1 */ /* ---------- ESTADOS (separados da paleta de marca) ---------- */ --ok: #2F5A38; --ok-wash: #DCE5D8; /* pago, confirmado */ --warn: #7A4E26; --warn-wash: #F3E4D6; /* pendente, vence · Dulce de Leche escuro, 5.6:1 */ --danger: #9A3F27; --danger-wash:#F2DED6; /* vencido, cancelado */ --neutral: #3A3F3A; --neutral-wash:#DEDAD3; /* ---------- TIPOGRAFIA ---------- */ /* Manual (hierarquia de fontes, p. 30): Helvetica Neue = interface e títulos em negrito ("Headline Small"). Arapey = leitura: descrições, citações, a apresentação dela. Voyage = títulos grandes ("Headline Large"), com parcimônia. Voyage é paga (VJ Type): até chegar o .woff2 web dela, Instrument Serif segura o lugar — serifa fina de alto contraste, mesmo desenho. */ --f-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --f-titulo: "Instrument Serif", Georgia, serif; /* lugar da Voyage até a licença web */ --f-serif: "Arapey", Georgia, "Times New Roman", serif; --f-ui: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --t-display: 700; /* títulos em Helvetica: negrito. A Voyage (--f-titulo) é sempre 400 */ --t-strong: 600; --t-body: 400; /* escala (1.25) */ --fs-9: 44px; --lh-9: 1.04; --fs-8: 34px; --lh-8: 1.08; --fs-7: 27px; --lh-7: 1.14; --fs-6: 22px; --lh-6: 1.22; --fs-5: 18px; --lh-5: 1.35; --fs-4: 15px; --lh-4: 1.55; /* corpo */ --fs-3: 13px; --lh-3: 1.5; --fs-2: 11.5px;--lh-2: 1.45; --fs-1: 10px; --lh-1: 1.4; /* etiquetas mono, maiúsculas, tracking .14em */ --track-display: -0.01em; --track-label: 0.14em; /* ---------- ESPAÇO ---------- Escala de passo 2 até 16px (a interface é densa), depois passo 8. Regra: use o token mais próximo; não invente valores intermediários. */ --s-0:2px; --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:14px; --s-7:16px; --s-8:20px; --s-9:24px; --s-10:32px; --s-11:40px; --s-12:48px; --s-14:64px; /* ---------- FORMA ---------- */ --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px; /* ---------- ELEVAÇÃO ---------- */ --sh-1: 0 1px 2px rgba(17,17,17,.04), 0 8px 22px -16px rgba(17,17,17,.28); --sh-2: 0 2px 6px rgba(17,17,17,.05), 0 20px 44px -24px rgba(17,17,17,.34); --sh-3: 0 28px 64px -30px rgba(17,17,17,.42); /* ---------- MOVIMENTO ---------- */ --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.4,.5,1); --d-fast: 180ms; --d-base: 260ms; --d-slow: 480ms; } /* Se ela nunca escolheu, o app segue o aparelho. Quem escolheu manda: data-theme fixa e o media query abaixo nao se aplica. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --paper:#1C241C; --surface:#263226; --surface-2:#2F3C2F; --surface-3:#394839; --line:#344234; --line-2:#465746; --ink:#E8E3DE; --ink-2:#CCC5B9; --ink-3:#A7A194; --brand-assinatura:#B0B094; --accent:#E0D6C7; --accent-ink:#293629; --accent-wash:#2F3C2F; --accent-line:#4A5A4A; --highlight:#B0B094; --highlight-ink:#171717; --highlight-wash:#2C3124; --highlight-text:#B0B094; --ok:#9CC79A; --ok-wash:#243424; --warn:#D9A77A; --warn-wash:#3B2A1C; --danger:#E8927A; --danger-wash:#3D2520; --neutral:#CCC5B9; --neutral-wash:#2F3C2F; --sh-1:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.9); --sh-2:0 2px 8px rgba(0,0,0,.5), 0 24px 50px -26px rgba(0,0,0,.95); --sh-3:0 32px 70px -32px rgba(0,0,0,.95); } } /* Tema escuro — o musgo vira o fundo (60% Moos, como no App Preview do manual). */ :root[data-theme="dark"]{ --paper:#1C241C; --surface:#263226; --surface-2:#2F3C2F; --surface-3:#394839; --line:#344234; --line-2:#465746; --ink:#E8E3DE; --ink-2:#CCC5B9; --ink-3:#A7A194; --brand-assinatura:#B0B094; --accent:#E0D6C7; --accent-ink:#293629; --accent-wash:#2F3C2F; --accent-line:#4A5A4A; --highlight:#B0B094; --highlight-ink:#171717; --highlight-wash:#2C3124; --highlight-text:#B0B094; --ok:#9CC79A; --ok-wash:#243424; --warn:#D9A77A; --warn-wash:#3B2A1C; --danger:#E8927A; --danger-wash:#3D2520; --neutral:#CCC5B9; --neutral-wash:#2F3C2F; --sh-1:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.9); --sh-2:0 2px 8px rgba(0,0,0,.5), 0 24px 50px -26px rgba(0,0,0,.95); --sh-3:0 32px 70px -32px rgba(0,0,0,.95); } /* ========================================================= REGRAS QUE NÃO SE QUEBRAM 1. Destaque (Cidra) nunca é texto sobre fundo claro. Use --highlight-text. 2. Musgo é a ação principal. Um botão de ação por tela. 3. Terracota (danger) é urgência (vencido, últimas vagas). Não decora. 4. Cinza é legenda, nunca título. 5. Números sempre em --f-mono com font-variant-numeric: tabular-nums. 6. Toda cor sai daqui. Hex solto no componente = bug. Exceção única: #fff sobre preenchimento de marca (verde/vinho). 7. Espaçamento sai de --s-*. Valor cru em px = dívida a pagar. 8. Todo controle clicável precisa de :focus-visible próprio ou herdado. 9. Botão só com ícone precisa de aria-label; ícone decorativo, aria-hidden. ========================================================= */