/* Base: fonte, foco, skip link, transicao de tema, reduced-motion. */
html{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);min-height:100dvh;font-variant-numeric:normal}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
::placeholder{color:var(--muted);opacity:1}
::selection{background:var(--primary-tint);color:var(--primary-tint-ink)}

:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

.skip-link{position:fixed;left:12px;top:-64px;z-index:100;padding:10px 16px;border-radius:var(--r-sm);background:var(--text);color:var(--bg);font-weight:700;font-size:14px;transition:top var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:12px;color:var(--bg)}

/* transicao suave entre temas (classe aplicada por theme.js por ~300ms) */
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color var(--dur-base) var(--ease-in-out),border-color var(--dur-base) var(--ease-in-out),color var(--dur-base) var(--ease-in-out),fill var(--dur-base) var(--ease-in-out),stroke var(--dur-base) var(--ease-in-out),box-shadow var(--dur-base) var(--ease-in-out) !important}

/* rolagem e conteudo abaixo da dobra */
html{scroll-behavior:smooth;scroll-padding-top:88px}
.defer{content-visibility:auto;contain-intrinsic-size:auto 640px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;scroll-behavior:auto !important}
  html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:none !important}
}

#app-header,#app-footer{display:contents}