/* ==========================================================================
   Gamify · Base: ponte com o Bootstrap 5.3, tipografia, foco, utilitários.
   Carregar depois de bootstrap.min.css e tokens.css.

   Camadas: bootstrap < ds-base < sem camada. (A camada "legado" da Fase 3, com o CSS antigo, saiu na
   Fase 7, D114 e D115.)
   - ds-base: padrões de elemento (body, títulos, links).
   - Sem camada: componentes gm-*, foco, link de pular e utilitários.
   ========================================================================== */
@layer bootstrap, ds-base;

@layer ds-base {

/* Ponte: o Bootstrap passa a usar as cores e fontes da marca */
:root,
[data-bs-theme] {
  --bs-body-bg: var(--gm-color-bg);
  --bs-body-color: var(--gm-color-text);
  --bs-body-font-family: var(--gm-font-text);
  --bs-body-font-size: var(--gm-font-size-base);
  --bs-body-line-height: var(--gm-leading-normal);
  --bs-emphasis-color: var(--gm-color-text);
  --bs-primary: var(--gm-color-primary);
  --bs-secondary: var(--gm-color-secondary);
  --bs-success: var(--gm-color-success-text);
  --bs-warning: var(--gm-color-warning-text);
  --bs-danger: var(--gm-color-danger);
  --bs-focus-ring-color: var(--gm-color-focus);
  --bs-border-color-translucent: var(--gm-color-border);
  --bs-secondary-color: var(--gm-color-text-muted);
  --bs-secondary-bg: var(--gm-color-surface-2);
  --bs-tertiary-bg: var(--gm-color-surface-2);
  --bs-border-color: var(--gm-color-border);
  --bs-border-radius: var(--gm-radius-sm);
  --bs-border-radius-lg: var(--gm-radius-md);
  --bs-heading-color: var(--gm-color-text);
  --bs-link-color: var(--gm-color-primary-text);
  --bs-link-hover-color: var(--gm-color-primary-hover);
  --bs-code-color: var(--gm-color-secondary-text);
  --bs-highlight-bg: var(--gm-color-xp-soft);
}

} /* fim de ds-base (ponte) */

html {
  scroll-padding-top: calc(var(--gm-header-height) + var(--gm-space-4)); /* foco nunca fica sob o cabeçalho fixo */
  scroll-padding-bottom: calc(var(--gm-toasts-offset) + var(--gm-bottomnav-offset) + var(--gm-space-4)); /* nem sob os avisos e a barra inferior (WCAG 2.4.11) */
  -webkit-text-size-adjust: 100%;
}

body {
  /* espaço para rolar o fim da página acima dos avisos e da barra inferior do celular */
  padding-bottom: calc(var(--gm-toasts-offset) + var(--gm-bottomnav-offset));
}

/* :where() não soma especificidade */
@layer ds-base {
:where(:root) body {
  background: var(--gm-color-bg);
  color: var(--gm-color-text);
  font-family: var(--gm-font-text);
  font-size: var(--gm-font-size-base);
  line-height: var(--gm-leading-normal);
}

:where(:root) :is(h1, h2, h3, h4) {
  font-family: var(--gm-font-display);
  font-weight: var(--gm-font-weight-black);
  line-height: var(--gm-leading-tight);
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-color-text);
  margin: 0 0 var(--gm-space-3);
}
:where(:root) h1 { font-size: var(--gm-font-size-3xl); }
:where(:root) h2 { font-size: var(--gm-font-size-2xl); }
:where(:root) h3 { font-size: var(--gm-font-size-xl); }
:where(:root) h4 { font-size: var(--gm-font-size-lg); }
:where(:root) p { margin: 0 0 var(--gm-space-4); }
:where(:root) small { font-size: var(--gm-font-size-sm); }

:where(:root) a {
  color: var(--gm-color-primary-text);
  text-decoration: underline;               /* link no texto nunca depende só da cor */
  text-underline-offset: var(--gm-underline-offset);
  text-decoration-thickness: from-font;
}
:where(:root) a:hover { color: var(--gm-color-primary-hover); text-decoration-thickness: var(--gm-border-width-strong); }

::selection { background: var(--gm-color-xp-soft); color: var(--gm-color-text); }
} /* fim de ds-base (elementos) */

/* Classes de texto do design system: sem camada, valem também dentro das páginas antigas */
.gm-display, .gm-h1, .gm-h2, .gm-h3, .gm-h4 {
  font-family: var(--gm-font-display);
  font-weight: var(--gm-font-weight-black);
  line-height: var(--gm-leading-tight);
  letter-spacing: var(--gm-tracking-tight);
  color: var(--gm-color-text);
  margin: 0 0 var(--gm-space-3);
}
.gm-h1 { font-size: var(--gm-font-size-3xl); }
.gm-h2 { font-size: var(--gm-font-size-2xl); }
.gm-h3 { font-size: var(--gm-font-size-xl); }
.gm-h4 { font-size: var(--gm-font-size-lg); }
.gm-small { font-size: var(--gm-font-size-sm); }
.gm-muted { color: var(--gm-color-text-muted); }
.gm-measure { max-width: var(--gm-measure); }
.gm-kicker {
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: var(--gm-color-text-muted);
}
.gm-num { font-variant-numeric: tabular-nums; }

/* Foco visível em todo elemento interativo (WCAG 2.4.7 / 2.4.11). Sem camada: vale também
   nas páginas antigas, que tiravam o contorno (outline: none) de campos e botões. */
:focus-visible {
  outline: var(--gm-focus-width) solid var(--gm-color-focus);
  outline-offset: var(--gm-focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

/* Ícones do sprite */
.gm-ico {
  width: var(--gm-icon-md);
  height: var(--gm-icon-md);
  flex: none;
  vertical-align: var(--gm-icon-baseline);
  fill: currentColor;
}
.gm-ico--sm { width: var(--gm-icon-sm); height: var(--gm-icon-sm); }
.gm-ico--lg { width: var(--gm-icon-lg); height: var(--gm-icon-lg); }
.gm-ico--xl { width: var(--gm-icon-xl); height: var(--gm-icon-xl); }

/* Pular para o conteúdo */
.gm-skip {
  position: absolute;
  left: var(--gm-space-4);
  top: var(--gm-space-2);
  z-index: var(--gm-z-skip);
  transform: translateY(calc(-100% - var(--gm-space-6)));
  padding: var(--gm-space-3) var(--gm-space-4);
  border-radius: var(--gm-radius-sm);
  background: var(--gm-color-surface);
  color: var(--gm-color-text);
  font-weight: var(--gm-font-weight-semibold);
  box-shadow: var(--gm-shadow-3);
}
.gm-skip:focus { transform: none; }

/* Texto só para leitor de tela */
.gm-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Contêiner */
.gm-container {
  width: min(var(--gm-container-max), 100% - 2 * var(--gm-gutter));
  margin-inline: auto;
}
.gm-stack > * + * { margin-top: var(--gm-space-4); }

/* Superfícies escuras: foco claro */
.gm-on-inverse :focus-visible,
[data-surface="inverse"] :focus-visible { outline-color: var(--gm-color-focus-inverse); }

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