/* Reset enxuto e tipografia de elemento. Só seletores de tag aqui — nada de componente, nada de página. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.65; text-wrap: pretty; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* ── Idioma ──────────────────────────────────────────────────────────────── Cada trecho traduzido vive em dois elementos irmãos marcados com data-lang. Quem decide qual aparece é o atributo data-lang do , então trocar de idioma é uma linha de JS — e a página funciona em PT mesmo sem JS. */ :root[data-lang='pt'] [data-lang='en'], :root[data-lang='en'] [data-lang='pt'] { display: none; } /* ── Ícones do botão de tema ── Mostra o ícone do tema em que a página ESTÁ (lua no claro, sol no escuro). Sem data-theme quem decide é a preferência do sistema, igual aos tokens. */ /* O :root não é decoração: sem ele o seletor perde para o `.btn svg` de components.css e os dois ícones aparecem juntos. */ :root [data-theme-icon='sun'] { display: none; } :root[data-theme='dark'] [data-theme-icon='moon'] { display: none; } :root[data-theme='dark'] [data-theme-icon='sun'] { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) [data-theme-icon='moon'] { display: none; } :root:not([data-theme]) [data-theme-icon='sun'] { display: block; } }