/*
O estilo "cru" dos elementos HTML puros — body, h1-h6, p, .container.
Nada com identidade visual de componente, só a base tipográfica e estrutural.
*/
body {
font-family: var(--font-body);
color: var(--text-dark);
background: var(--bg-light);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
line-height: 1.1;
}
/* Pesos alinhados às variantes de fato preloadadas no (500 e 600) */
h1,
h2 {
font-weight: 600;
}
h3,
h4,
h5,
h6 {
font-weight: 500;
}
p {
line-height: 1.7;
}
/* O reset zera margin de tudo — isso devolve o respiro entre
parágrafos irmãos (ex: about, approach) sem afetar outros elementos */
p + p {
margin-top: 1rem;
}
.container {
width: var(--container-width);
margin: 0 auto;
}
/* Foco visível consistente com a marca em qualquer elemento focável
(o outline nativo do navegador NÃO é removido, só substituído) */
:focus-visible {
outline: 2px solid var(--purple-dark);
outline-offset: 2px;
}
/* Skip-link: escondido visualmente até receber foco via teclado */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-sm);
z-index: 100;
padding: var(--space-xs) var(--space-sm);
background: var(--purple-dark);
color: var(--text-light);
border-radius: var(--radius-lg);
transition: top var(--transition-fast);
}
.skip-link:focus-visible {
top: var(--space-sm);
}