/* ═══════════════════════════════════════════════════════════
   GARDEN HERO  ·  Base & Reset
   Estilos globais aplicados em todas as páginas.
   Depende de: tokens.css
   ═══════════════════════════════════════════════════════════ */

/* ── Fonte customizada ───────────────────────────────────── */
@font-face {
  font-family: 'Nouveau Nostalgia';
  src: url('../assets/Nouveau Nostalgia.otf') format('opentype');
  font-display: swap;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Base ────────────────────────────────────────────────── */
html {
  font-size: 16px;          /* ancora o rem = --text-sm       */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-white);
  background-color: var(--color-bg);
}

/* ── Links ───────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
}

/* ── Imagens ─────────────────────────────────────────────── */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Listas ──────────────────────────────────────────────── */
ul, ol {
  list-style: none;
}

/* ── Hierarquia tipográfica padrão ───────────────────────── */
/*   Use as classes abaixo como utilitários em qualquer página */

.type-hero {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 9.5vw, var(--text-7xl));
  line-height: 0.92;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.type-subtitle {
  font-family: var(--font-display);
  font-size: clamp(var(--text-sm), 2.2vw, var(--text-lg));
  letter-spacing: 0.38em;
  color: var(--color-gold);
}

.type-section {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}

.type-heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
  letter-spacing: 0.08em;
}

.type-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-white-80);
}

.type-small {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}

.type-label {
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white-38);
}

/* ── Utilitários ─────────────────────────────────────────── */
.text-gold    { color: var(--color-gold); }
.text-muted   { color: var(--color-white-50); }
.text-upper   { text-transform: uppercase; }
.text-center  { text-align: center; }

/* ── Acessibilidade: foco visível ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ── Scroll bar discreta ─────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 197, 21, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 197, 21, 0.45);
}

/* ── Seleção de texto ────────────────────────────────────── */
::selection {
  background: rgba(255, 197, 21, 0.25);
  color: #fff;
}