/* ── Custom properties ── */
:root {
  --bg-deep: #0d0b0a;
  --bg-card: #110f0e;
  --sand: #f5ebe0;
  --gold: #e8c4a0;
  --terracotta: #c45b3a;
  --terracotta-dark: #a84a2e;
}

/* ── Base ── */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-deep);
  color: var(--sand);
  font-family: 'Inter', system-ui, sans-serif;
}

.font-playfair {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-inter {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Navbar scroll state ── */
#nav.scrolled {
  background: rgba(13, 11, 10, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 196, 160, 0.08);
}

/* ── Reveal animations (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal-up {
    transform: translateY(24px);
  }

  .reveal-left {
    transform: translateX(-24px);
  }

  .reveal-right {
    transform: translateX(24px);
  }

  .reveal-up.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ── Select styling ── */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e8c4a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

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

/* ── Selection ── */
::selection {
  background: var(--terracotta);
  color: var(--sand);
}