/* Relevo — a camada de profundidade que o produto inteiro compartilha.
 *
 * Ela existe porque o tratamento pedido — sombra, espessura, movimento — vale
 * para o player, para o curso e para o acervo, e escrevê-lo três vezes garante
 * três versões divergentes no primeiro ajuste. Aqui ele é declarado uma vez, em
 * tokens, e cada tela o aplica onde faz sentido.
 *
 * Carregue DEPOIS de theme-tokens.css e ANTES da folha da tela: os tokens de
 * cor vêm de baixo, e a folha da tela precisa poder sobrepor o que quiser.
 *
 * -- Por que sombra em camadas
 *
 * Uma sombra só faz um retângulo parecer colado num papel de parede. Três
 * fazem ele parecer apoiado numa mesa, porque é assim que a luz real funciona:
 * um contato duro e curto embaixo, um corpo médio, e um halo largo e fraco.
 * A cor das três vem de `--phsp-shadow`, que é token de tema — num tema claro
 * a sombra é marrom-quente, num escuro ela é preta, e nenhuma das duas está
 * escrita aqui.
 *
 * -- Por que a perspectiva mora no contêiner
 *
 * `perspective` em cada cartão dá a cada um o próprio ponto de fuga, e a grade
 * inteira parece torta. No contêiner, todos compartilham o mesmo ponto — que é
 * o olho de quem olha.
 */

:root {
  --relevo-contato: 0 1px 1px color-mix(in srgb, var(--phsp-shadow) 14%, transparent);
  --relevo-corpo: 0 4px 10px color-mix(in srgb, var(--phsp-shadow) 11%, transparent);
  --relevo-halo: 0 18px 38px color-mix(in srgb, var(--phsp-shadow) 9%, transparent);
  --relevo-repouso: var(--relevo-contato), var(--relevo-corpo), var(--relevo-halo);
  --relevo-erguido:
    0 2px 2px color-mix(in srgb, var(--phsp-shadow) 16%, transparent),
    0 10px 22px color-mix(in srgb, var(--phsp-shadow) 15%, transparent),
    0 34px 64px color-mix(in srgb, var(--phsp-shadow) 14%, transparent);
  /* Afundado: o inverso, para superfície que recebe em vez de projetar — o
     leito de uma tecla, a canaleta de um controle deslizante. */
  --relevo-afundado:
    inset 0 1px 3px color-mix(in srgb, var(--phsp-shadow) 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--phsp-panel) 40%, transparent);
  /* A linha de luz no topo de um objeto com espessura. */
  --relevo-luz: color-mix(in srgb, var(--phsp-panel) 92%, transparent);
  --relevo-transicao: 240ms cubic-bezier(.2, .7, .3, 1);
}

/* Classe utilitária: qualquer superfície que deva parecer objeto. */
.relevo {
  box-shadow: var(--relevo-repouso);
  transition: box-shadow var(--relevo-transicao), transform var(--relevo-transicao), border-color var(--relevo-transicao);
}
.relevo-topo { position: relative; }
.relevo-topo::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--relevo-luz) 20%, var(--relevo-luz) 80%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .relevo-ergue:hover,
  .relevo-ergue:focus-within { transform: translateY(-3px); box-shadow: var(--relevo-erguido); }
  .relevo-palco { perspective: 1400px; }
  .relevo-palco > .relevo-ergue { transform-style: preserve-3d; }
  .relevo-palco > .relevo-ergue:hover { transform: translateY(-5px) rotateX(2.5deg); }
}

/* ── alvo de toque ─────────────────────────────────────────────────────────
 *
 * Medido em 375 px: os links do topo saíam com 36 px de altura e o seletor de
 * tema com 28 px. Vinte e oito pixels é menos que a largura de um dedo, e num
 * telefone isso não é desconforto — é erro de clique.
 *
 * A regra é por PONTEIRO, não por largura de tela. Uma janela estreita num
 * computador continua sendo operada por mouse e não precisa de alvo grande; um
 * tablet de 1024 px é operado por dedo e precisa. `pointer: coarse` pergunta a
 * coisa certa, e é o que separa "responsivo" de "adaptado ao dispositivo".
 *
 * 44 px é o mínimo da WCAG 2.5.5 e o que Apple e Google recomendam há uma
 * década. O produto tem criança de quatro anos como usuária declarada — ali o
 * dedo é menor e a mira é pior, e o número não deveria nem ser discutido.
 */
@media (pointer: coarse) {
  :where(a, button, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])) {
    min-height: 44px;
  }
  /* Link dentro de parágrafo não vira bloco de 44 px: isso quebraria a linha do
     texto. Ele fica como está — a regra vale para controle, não para leitura. */
  :where(p, li, figcaption) :where(a) { min-height: 0; }
  :where(select) { padding-block: 10px; }
  :where(nav) :where(a) { display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* O objeto continua parecendo objeto parado: a sombra em repouso já carrega
     a espessura inteira, e nada aqui depende de ter se movido para ser lido. */
  .relevo, .relevo-ergue { transition: none; }
  .relevo-ergue:hover, .relevo-ergue:focus-within { transform: none; box-shadow: var(--relevo-erguido); }
}