/* ═══════════════════════════════════════════════════════
   RESET & BASE
   Normalize cross-browser + opinionated base styles
   ═══════════════════════════════════════════════════════ */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

/* ── Links ── */
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

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

/* ── Interactive ── */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

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

/* ── Tables ── */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--green);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ── Selection ── */
::selection {
  background: rgba(212, 165, 116, 0.3);
  color: #fff;
}

/* ── Focus visible ── */
:focus-visible {
  outline: 1.5px solid var(--gold);
  outline-offset: 2px;
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroGrad {
  0%, 100% { background-position: 0% 50%; }
  33%      { background-position: 50% 100%; }
  66%      { background-position: 100% 0%; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}