/* ==========================================================================
   FMM Design System — base
   Reset leve, tipografia, layout e utilitários. Depende de tokens/fmm-tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--fmm-header-height) + var(--fmm-space-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fmm-color-bg);
  color: var(--fmm-color-text);
  font: var(--fmm-text-body);
  letter-spacing: var(--fmm-letter-spacing-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--fmm-color-selection-bg); color: var(--fmm-color-text); }
[hidden] { display: none !important; }

/* Foco visível universal: anel azul-claro, 2px, afastado 3px. */
:focus { outline: none; }
:focus-visible {
  outline: var(--fmm-focus-width) solid var(--fmm-color-focus);
  outline-offset: var(--fmm-focus-offset);
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}

/* ---------- Tipografia ---------- */
.fmm-display-xl { font: var(--fmm-text-display-xl); letter-spacing: var(--fmm-letter-spacing-display); text-wrap: balance; }
.fmm-display    { font: var(--fmm-text-display);    letter-spacing: var(--fmm-letter-spacing-display); text-wrap: balance; }
.fmm-h1         { font: var(--fmm-text-h1); letter-spacing: var(--fmm-letter-spacing-heading); text-wrap: balance; }
.fmm-h2         { font: var(--fmm-text-h2); letter-spacing: var(--fmm-letter-spacing-heading); text-wrap: balance; }
.fmm-h3         { font: var(--fmm-text-h3); letter-spacing: -0.01em; text-wrap: balance; }
.fmm-h4         { font: var(--fmm-text-h4); letter-spacing: -0.005em; }
.fmm-lead       { font: var(--fmm-text-lead); color: var(--fmm-color-text-secondary); max-width: var(--fmm-measure-lead); text-wrap: pretty; }
.fmm-body       { font: var(--fmm-text-body); max-width: var(--fmm-measure-body); text-wrap: pretty; }
.fmm-small      { font: var(--fmm-text-body-sm); }
.fmm-caption    { font: var(--fmm-text-caption); color: var(--fmm-color-text-tertiary); }
.fmm-eyebrow {
  font: var(--fmm-font-weight-medium) var(--fmm-font-size-eyebrow) / 1.3 var(--fmm-font-family-brand);
  letter-spacing: var(--fmm-letter-spacing-eyebrow);
  color: var(--fmm-color-text-accent);
}
.fmm-muted { color: var(--fmm-color-text-secondary); }
.fmm-mono { font-family: var(--fmm-font-family-mono); font-size: 0.92em; }

/* ---------- Layout ---------- */
.fmm-container {
  width: 100%;
  max-width: calc(var(--fmm-container-max) + 2 * var(--fmm-container-pad));
  margin-inline: auto;
  padding-inline: var(--fmm-container-pad);
}
.fmm-container--wide { max-width: calc(var(--fmm-container-wide) + 2 * var(--fmm-container-pad)); }
.fmm-section { padding-block: var(--fmm-section-space); position: relative; }
.fmm-section--alt { background: var(--fmm-color-bg-alt); }
.fmm-grid {
  display: grid;
  grid-template-columns: repeat(var(--fmm-grid-columns), minmax(0, 1fr));
  gap: var(--fmm-grid-gutter);
}
.fmm-stack > * + * { margin-top: var(--fmm-stack-gap, var(--fmm-space-4)); }
.fmm-cluster { display: flex; flex-wrap: wrap; gap: var(--fmm-cluster-gap, var(--fmm-space-3)); align-items: center; }

/* ---------- Utilitários ---------- */
.fmm-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fmm-icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.75; }
.fmm-icon--sm { width: 16px; height: 16px; }
.fmm-icon--md { width: 20px; height: 20px; }
.fmm-icon--lg { width: 24px; height: 24px; }

/* Vidro: sempre com fallback sólido. */
.fmm-glass {
  background: var(--fmm-glass-fallback);
  border: var(--fmm-border-width) solid var(--fmm-glass-border);
  box-shadow: var(--fmm-shadow-glass);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fmm-glass {
    background: var(--fmm-glass-bg);
    -webkit-backdrop-filter: blur(var(--fmm-glass-blur)) saturate(var(--fmm-glass-saturate));
    backdrop-filter: blur(var(--fmm-glass-blur)) saturate(var(--fmm-glass-saturate));
  }
}
/* Vidro denso: menus, popovers e toasts — ficam sobre texto, então quase opacos. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fmm-glass.fmm-glass--strong { background: var(--fmm-glass-bg-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  .fmm-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fmm-glass-fallback); }
}

/* Luz ambiente: no máximo uma composição por viewport, atrás de conteúdo. */
.fmm-ambient { position: relative; isolation: isolate; overflow: clip; }
.fmm-ambient::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 45% at 30% 30%, var(--fmm-glow-blue), transparent 70%),
    radial-gradient(45% 50% at 72% 40%, var(--fmm-glow-soft), transparent 70%);
  filter: blur(20px);
}

/* Revelação ao rolar (ativada por JS com .is-visible). */
.fmm-reveal { opacity: 0; transform: translateY(var(--fmm-reveal-distance)); transition: opacity var(--fmm-duration-reveal) var(--fmm-ease-out), transform var(--fmm-duration-reveal) var(--fmm-ease-out); }
.fmm-reveal.is-visible { opacity: 1; transform: none; }
.no-js .fmm-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fmm-reveal { opacity: 1; transform: none; } }