/*
 * Tivra — Base
 * ────────────
 * Reset mínimo + estilos de raiz. Lê tokens de `css/tokens.css`.
 *
 * Este ficheiro é o "chão" sobre o qual os componentes assentam.
 * Não define nada que seja específico de uma secção ou cartão —
 * só aquilo que é transversal à página inteira.
 *
 * Ordem de carregamento no index.html:
 *   1. tokens.css
 *   2. base.css          ← este
 *   3. <style> com componentes (depois sairá para components/*.css)
 */

/* Reset mínimo. Não usamos normalize.css — a página é simples
   e a tipografia é toda nossa. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--body);
  font-weight: 200;
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

img, svg { display: block; max-width: 100%; }

a { color: var(--text); text-decoration: none; }

/* Foco visível para utilizadores a navegar por teclado.
   Anel de foco substitui o contorno 1px (decisão de design:
   zero bordas em controlos; foco distingue-se por halo). */
:focus-visible { outline: 0; }
:focus-visible { box-shadow: var(--focus-ring); }

/* Skip-link de acessibilidade. Escondido fora do ecrã até receber
   foco. É o primeiro elemento focável da página. */
.skip { position: absolute; left: -999px; }
.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  z-index: 20;
  background: var(--primary);
  color: var(--primary-ink);
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  box-shadow: var(--focus-ring-strong);
}