/* ═══════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════ */
:root {
  --bg:         #07070a;
  --bg2:        #0f0f14;
  --bg3:        #16161e;
  --surface:    #1c1c26;
  --border:     rgba(201,169,110,0.15);
  --gold:       #C9A96E;
  --gold-light: #E8D5B0;
  --gold-dim:   rgba(201,169,110,0.35);
  --text:       #F0EBE0;
  --text-muted: #8A8478;
  --text-dim:   #5A5550;
  --white:      #FAFAF8;
  --radius:     4px;
  --nav-h:      72px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Garante que [hidden] sempre esconda o elemento, mesmo quando a classe do
   elemento (ex: .btn-ghost, .btn-primary) define display: flex/inline-flex. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  font-size: 16px;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

::selection { background: var(--gold-dim); color: var(--gold-light); }