@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@300;500;700&family=Space+Grotesk:wght@400;500;600&display=swap");

:root {
  color-scheme: light;
  --ink: #101214;
  --ink-soft: #2a2d32;
  --sand: #f7f2ec;
  --sand-deep: #efe7de;
  --accent: #d18c4f;
  --accent-dark: #b56f33;
  --accent-cool: #2d5c6f;
  --outline: rgba(16, 18, 20, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  background: var(--sand);
  color: var(--ink);
}

.heading-font {
  font-family: "Fraunces", "Georgia", serif;
}

.glass-panel {
  background: #ffffff;
  border: 1px solid var(--outline);
  box-shadow: 0 18px 40px rgba(18, 18, 18, 0.12);
}

.section-spacing {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.gradient-orb {
  filter: blur(40px);
  opacity: 0.65;
  animation: float 16s ease-in-out infinite;
}

.gradient-orb.alt {
  animation-delay: -6s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    transform: translateY(-20px) translateX(10px) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .gradient-orb {
    animation: none;
  }
}

.anchor-offset {
  scroll-margin-top: 7rem;
}

.card-shadow {
  box-shadow: 0 12px 24px rgba(16, 18, 20, 0.1);
}

.tag {
  border: 1px solid var(--outline);
  background: rgba(255, 255, 255, 0.8);
}

.button-primary {
  background: var(--accent);
  color: #fff7ef;
}

.button-primary:hover {
  background: var(--accent-dark);
}

.button-outline {
  border: 1px solid var(--ink);
  color: var(--ink);
}

.button-outline:hover {
  background: var(--ink);
  color: #ffffff;
}