/* ============================================================================
   TEO ESPORTES · BASE LAYER
   Global reset + brand body + shared text primitives (.display, .eyebrow).
   Loaded after tokens.css. Token-only (zero hardcode beyond the brand bg
   alias which itself is a token).
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-on-dark);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Accessibility: visible focus ring everywhere, brand orange (WCAG 2.2 §2.4.11) */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ----- Skip link (WCAG 2.4.1 Bypass Blocks) -----
   PRIMEIRO elemento focável do <body>; invisível até receber foco pelo Tab,
   aí aparece como pill de marca no canto. Alvo = <main id="main" tabindex="-1">
   (o tabindex garante que o foco realmente vá para o conteúdo).
     <a class="skip-link" href="#main">Pular para o conteúdo</a>
     …
     <main id="main" tabindex="-1">…</main>
   Guard-rail: tools/validate-page.mjs (E6 alvo inexistente · W4 ausente).  */
.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--orange-500);
  color: var(--text-on-brand); /* 6.58:1 nos dois temas */
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-brand);
}
/* Fora de foco: visually-hidden (padrão sr-only — 1px/-1px são do idioma da
   técnica, não espaçamento de layout). */
.skip-link:not(:focus) {
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none;
}
/* O alvo recebe foco programático: sem anel em volta da página inteira. */
main[tabindex="-1"]:focus { outline: none; }

/* Layout helper carried over from the reference. Os organisms de página
   (.nav, .hero-grid, .hero--media) embutem a mesma geometria — o .wrap segue
   válido para conteúdo genérico (footer, seções custom), mas esquecê-lo num
   organism não quebra mais o container. */
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

/* ----- Text primitive: EYEBROW (uppercase orange label) ----- */
.eyebrow {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
  color: var(--orange-400);
}

/* ----- Text primitive: DISPLAY (Lato black italic uppercase heading) ----- */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-style: italic;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.display .accent { color: var(--orange-500); }

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}