/* =====================================================================
   Hebreus Product Design System — Foundation (Phase 1)
   Escrito à mão. Consome static/css/hb-tokens.generated.css (gerado).

   Escopo desta camada: skip-link, sistema de foco visível e movimento
   reduzido, todos como infraestrutura nova — nada aqui redefine seletor
   global (`body`, `a`, `button`...) que mudaria a aparência das telas
   existentes. Tudo vive sob `.hb-*` ou IDs novos introduzidos pelo
   base.html desta fase.

   Ordem de import esperada (ver templates/base.html):
     1. hb-tokens.generated.css   (custom properties)
     2. hb-foundation.css         (este arquivo)
     3. hb-components.css         (componentes-assinatura)
     4. styles.css                (CSS legado do portal, inalterado)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Reset mínimo de caixa — nenhuma decisão visual, só correção técnica.
   Sem isto, `width: 100%` + padding em qualquer componente hb-* (Input
   Outlined, botão de bloco...) soma o padding por cima dos 100% e
   estoura o contêiner; o <body> mantém a margem default de 8px do UA
   stylesheet e some no cálculo de scrollWidth. Achado no teste de zoom
   real (200%/400%) da Phase 3 — viewport efetivo estreito expôs os dois.
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* ---------------------------------------------------------------------
   Skip link — HEBREUS_PRODUCT_DESIGN_SYSTEM.md §7 da missão / WCAG 2.4.1.
   Discreto fora do foco, visível ao foco, usa o anel canônico.
   --------------------------------------------------------------------- */
.hb-skip-link {
  position: absolute;
  top: -40px;
  left: var(--hb-space-3);
  z-index: 1000;
  padding: var(--hb-space-3) var(--hb-space-5);
  background: var(--hb-color-ink-900);
  color: var(--hb-color-white);
  font-family: var(--hb-typography-family-technical);
  font-size: 13px;
  font-weight: var(--hb-typography-weight-medium);
  text-decoration: none;
  border-radius: var(--hb-radius-action);
  transition: top var(--hb-motion-transition-hover);
}

.hb-skip-link:focus {
  top: var(--hb-space-3);
}

/* ---------------------------------------------------------------------
   Foco visível — HEBREUS_WEB_INTERACTION_STATES.md §5.
   outline 2px ink.900, offset 2px, raio do próprio elemento, 0ms.

   Progressive enhancement: a regra de baixo (`:focus`) é o fallback para
   navegadores sem suporte a `:focus-visible` — nunca removemos o foco
   sem substituto. Onde `:focus-visible` existe, `@supports` desliga o
   `:focus` puro e liga só o `:focus-visible`, para não acender o anel em
   clique de mouse.
   --------------------------------------------------------------------- */
.hb-focusable:focus {
  outline: var(--hb-size-focus-ring-width) solid var(--hb-color-focus-ring);
  outline-offset: var(--hb-size-focus-ring-offset);
  transition: none; /* motion.transition.focus = 0ms — o anel nunca anima */
}

@supports selector(:focus-visible) {
  .hb-focusable:focus {
    outline: none;
  }

  .hb-focusable:focus-visible {
    outline: var(--hb-size-focus-ring-width) solid var(--hb-color-focus-ring);
    outline-offset: var(--hb-size-focus-ring-offset);
  }
}

/* Elemento rente ao recipiente (ex.: linha de definição dentro de um Card
   com overflow:hidden) — anel interno em vez de vazar. Aplicar junto de
   .hb-focusable quando for o caso. */
.hb-focusable--inset:focus-visible,
.hb-focusable--inset:focus {
  outline-offset: calc(var(--hb-size-focus-ring-offset) * -1);
}

/* ---------------------------------------------------------------------
   Movimento reduzido — ponto de leitura único (§10 da missão,
   HEBREUS_WEB_INTERACTION_STATES.md §8.5).

   Zera as durações de hover/pressed/entrada usadas pelos componentes
   hb-*; a TROCA de estado continua acontecendo (cor ainda muda), só o
   percurso desaparece. `duration.spin` fica de fora de propósito: o
   spinner de carregamento comunica processo em curso e removê-lo tira
   informação (HEBREUS_PRODUCT_DESIGN_SYSTEM.md §12.4).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hb-motion-duration-instant: 0ms;
    --hb-motion-duration-press: 0ms;
    --hb-motion-duration-short: 0ms;
    --hb-motion-duration-medium: 0ms;
  }
}

/* ---------------------------------------------------------------------
   Landmark utilitário mínimo. O layout visual de cada tela continua
   sendo decidido pelo próprio template (base.html não impõe grade).

   Entrada sutil (missão "post-release interaction polish" §3): opacity +
   translateY pequeno, reaproveitando o mesmo token de duração que
   `prefers-reduced-motion` já zera abaixo — sem media query nova. A
   opacidade de partida só existe dentro do @keyframes: se a animação não
   rodar (navegador sem suporte), `.hb-main` fica no `opacity` padrão
   (1), então a página nunca depende de JS/animação pra ficar visível.
   --------------------------------------------------------------------- */
.hb-main {
  display: block;
  animation: hb-page-enter var(--hb-motion-duration-instant) var(--hb-motion-easing-standard);
}

@keyframes hb-page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------
   Utilitário de acessibilidade — texto só para leitor de tela. Não é
   token nem decisão visual do Hebreus DS, é infraestrutura padrão de
   qualquer sistema web (WCAG). Introduzido na Phase 2 para o rótulo do
   botão de menu mobile.
   --------------------------------------------------------------------- */
.hb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  /* clip-path (não clip: rect()) — a técnica legada ainda deixa o texto
     contribuir para o scrollWidth de ancestrais em viewports efetivos
     estreitos (zoom real, achado na Phase 3), mesmo visualmente oculto. */
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}