/* ============================================================
 * FBG — Base
 * Reset, tipografia e piso de acessibilidade.
 * Depende de tokens.css.
 * ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Tipografia ---------------------------------------------
 * §7: apenas dois pesos, 400 e 500. Nada de 600/700.
 * A tipografia carrega o peso visual — sem ícone de enchimento. */

:where(h1, h2, h3, h4, .fbg-display) {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-tight);
  letter-spacing: var(--font-tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

.fbg-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
}

:where(p) {
  max-width: 68ch; /* medida de leitura confortável */
  text-wrap: pretty;
}

:where(a) {
  color: var(--color-primary-fg);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:where(a):hover { color: var(--color-primary-hover); }

:where(small, .fbg-caption) {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
}

/* Mono como ACENTO — labels, números, versões, timestamps (§7).
   Nunca no corpo de texto. */
.fbg-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-tracking-wider);
  line-height: var(--font-leading-snug);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Japonês vertical (§3, §7). Mincho serifada — o traço fino é o que dá
   a sofisticação; uma gótica quebraria o efeito. */
.fbg-jp {
  font-family: var(--font-family-jp);
  font-weight: var(--font-weight-regular);
}
.fbg-jp--vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: var(--font-tracking-jp);
  line-height: 1;
}

/* --- Layout -------------------------------------------------- */

.fbg-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}

/* Ma (間) — o respiro não é sobra, é o que dá sentido ao que está presente.
   Hero com padding generoso (§9: 100px 60px), fluido para baixo. */
.fbg-hero {
  padding-block: clamp(var(--space-16), 12vw, var(--space-24));
  padding-inline: clamp(var(--space-6), 6vw, var(--space-16));
}

.fbg-stack > * + * { margin-block-start: var(--fbg-stack-gap, var(--space-6)); }
.fbg-stack--tight { --fbg-stack-gap: var(--space-3); }
.fbg-stack--loose { --fbg-stack-gap: var(--space-12); }

/* Assimetria controlada (不均整) — solitário não significa centralizado (§2). */
.fbg-offset {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .fbg-offset { grid-template-columns: 5fr 7fr; align-items: end; }
  .fbg-offset--reverse { grid-template-columns: 7fr 5fr; }
}

.fbg-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* --- Acessibilidade ------------------------------------------
 * §9 pede "nenhuma sombra decorativa — apenas focus rings funcionais".
 * Aqui isso vira regra do sistema, não recomendação. */

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-control);
}

.fbg-skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: calc(var(--space-4) * -10);
  z-index: 999;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-control);
  transition: inset-block-start var(--motion-fast) var(--motion-ease);
}
.fbg-skip-link:focus-visible { inset-block-start: var(--space-4); }

.fbg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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