/* base.css — Elementos HTML base */

/* ─── Base ─────────────────────────────────────────────── */
html {
  font-size: 16px;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Headings ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--cor-texto);
  text-wrap: balance;
}

h5, h6 {
  font-family: var(--ff-body);
  font-weight: 600;
  line-height: var(--lh-heading);
}

h1 { font-size: clamp(var(--fs-7), 5vw, var(--fs-8)); }
h2 { font-size: clamp(var(--fs-6), 4vw, var(--fs-7)); }
h3 { font-size: clamp(var(--fs-5), 3vw, var(--fs-6)); }
h4 { font-size: var(--fs-5); }
h5 { font-size: var(--fs-4); }
h6 { font-size: var(--fs-3); }

p {
  line-height: var(--lh-body);
  color: var(--cor-texto-suave);
  text-wrap: pretty;
}

strong { font-weight: 600; color: var(--cor-texto); }

/* ─── Links ─────────────────────────────────────────────── */
a { transition: color var(--t-fast); }
a:hover { color: var(--cor-dourado); }

/* ─── Focus ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── Seleção ───────────────────────────────────────────── */
::selection {
  background-color: var(--cor-dourado);
  color: var(--cor-branco);
}

/* ─── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar         { width: 5px; }
::-webkit-scrollbar-track   { background: var(--cor-fundo-escuro); }
::-webkit-scrollbar-thumb   { background: var(--cor-dourado); border-radius: var(--radius-full); }

/* ─── Skip link ─────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-cursor);
  background: var(--cor-dourado);
  color: var(--cor-branco);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  transform: translateY(-150%);
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translateY(0); }

/* ─── Kicker / overline (ocultos por decisão de design — 2026-05-15) ─── */
.kicker,
.kicker--light,
.kicker--dark{
  display: none !important;
}

.kicker--light { color: var(--cor-dourado-claro); }
.kicker--dark  { color: var(--cor-texto-suave); }

/* ─── Hairline dourada ──────────────────────────────────── */
.hairline {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--cor-dourado);
  margin: var(--sp-4) 0;
}
.hairline--center { margin-inline: auto; }

/* ─── Seção separator ───────────────────────────────────── */
.section-sep {
  width: 100%;
  height: 1px;
  background: var(--cor-linha);
}

/* ─── Imagens ───────────────────────────────────────────── */
img {
  background-color: var(--cor-fundo-card); /* fallback enquanto carrega */
}

/* ─── Hifenização ───────────────────────────────────────── */
p, blockquote, li {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ─── Utilities ─────────────────────────────────────────── */
.text-balance { text-wrap: balance; }

.text-italic-display {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
}

.light-streak {
  background: var(--grad-light-streak);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lightStreak 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .light-streak { animation: none; color: var(--cor-dourado-brilho); background: none; }
}

.atmosphere-grid {
  position: relative;
}
.atmosphere-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 79px, var(--grid-line-color-light) 79px, var(--grid-line-color-light) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, var(--grid-line-color-light) 79px, var(--grid-line-color-light) 80px);
  pointer-events: none;
  z-index: 0;
}

.atmosphere-grid--dark::before {
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 79px, var(--grid-line-color) 79px, var(--grid-line-color) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, var(--grid-line-color) 79px, var(--grid-line-color) 80px);
}