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

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 15px;
  line-height: 1.5;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(201, 162, 74, 0.2), transparent 62%),
    radial-gradient(900px 620px at 105% 105%, rgba(92, 22, 34, 0.42), transparent 60%),
    radial-gradient(700px 500px at -10% 90%, rgba(12, 42, 29, 0.35), transparent 60%),
    repeating-linear-gradient(90deg, rgba(243, 234, 214, 0.03) 0 1px, transparent 1px 7px),
    var(--ink-950);
  background-attachment: fixed;
}

/* vinheta */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6) 100%);
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }

::selection { background: var(--gold-500); color: var(--ink-950); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* texto dourado metálico (com fallback para quem não suporta) */
.gold-text {
  color: var(--gold-400);
  background: linear-gradient(180deg, var(--gold-200) 0%, var(--gold-400) 48%, var(--gold-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.icon--stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (forced-colors: active) {
  .gold-text { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}