/*
 * 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. */
:focus-visible { outline: 1px solid var(--a1); outline-offset: 3px; }

/* 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(--a1);
  color: var(--black);
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
}