/* Cores e fontes: brand/tokens.json (direção A, Ops Console). Mudou lá, muda aqui. */
@font-face { font-family:"Public Sans"; src:url(/fonts/public-sans.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
:root { color-scheme: light dark; --fg:#15213B; --bg:#F5F7FA; --surface:#FFFFFF; --muted:#4F5B6E; --line:#D5DBE4; --accent:#137885; }
@media (prefers-color-scheme: dark) { :root { --fg:#E6EBF2; --bg:#0E1521; --surface:#172133; --muted:#A6B1C2; --line:#2A3648; --accent:#4FC3D1; } }
* { box-sizing: border-box; }
body { margin:0; font:18px/1.65 "Public Sans", Arial, Helvetica, sans-serif; color:var(--fg); background:var(--bg); }
header, main, footer { max-width:42rem; margin:0 auto; padding:1.25rem; }
header { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:1rem; line-height:1.2; letter-spacing:.12em; text-transform:uppercase; color:var(--fg); text-decoration:none; }
nav, footer { font-size:.9rem; line-height:1.6; }
nav a, footer a { margin-right:1rem; }
a { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
h1 { font-size:2.5rem; line-height:1.15; letter-spacing:-.01em; margin:2rem 0 1rem; text-wrap:balance; }
h2 { font-size:1.4rem; line-height:1.25; margin:2.25rem 0 .5rem; }
.lede { font-size:1.2rem; }
.note { color:var(--muted); font-size:.9rem; line-height:1.6; }
footer { border-top:1px solid var(--line); color:var(--muted); margin-top:3rem; }
/* chave ligada do logo (brand/logo): pílula em accent, botão à direita */
.brand::before { content:""; display:inline-block; width:1.9em; height:1em; border-radius:.5em; margin-right:.6em; vertical-align:-.15em; background:radial-gradient(circle at calc(100% - .5em) 50%, var(--bg) .36em, var(--accent) .37em); }