/* ---------- Theme variables ---------- */
:root {
  --background: 46 100% 94%;
  --foreground: 147 10% 45%;
  --accent: 20 38% 42%;
}

:root.dark {
  --background: 147 10% 45%;
  --foreground: 46 100% 94%;
  --accent: 22 62% 70%;
}

/* ---------- Reset / base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  height: 100dvh;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "DM Serif Display", serif;
  -webkit-font-smoothing: antialiased;
  /* Kill the rubber-band bounce on mobile */
  overscroll-behavior-y: none;
}

/* ---------- Layout ---------- */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 100vh is the *large* viewport on mobile (URL bar hidden), which leaves the
     page taller than the visible area whenever the bar is showing. dvh tracks
     the bar, so the page always fits exactly and never scrolls. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background-color: hsl(var(--background));
}

/* Tree image on the right */
.tree {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 50%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- Theme toggle ---------- */
.theme-toggle-wrap {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: hsl(var(--accent));
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.theme-toggle:hover {
  opacity: 0.8;
}

.theme-toggle .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Show sun in dark mode, moon in light mode */
.icon-sun {
  display: none;
}
.icon-moon {
  display: block;
}
:root.dark .icon-sun {
  display: block;
}
:root.dark .icon-moon {
  display: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}

.hero-inner {
  width: 100%;
  max-width: 36rem;
}

.logo {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem;
}

/* Show correct logo per theme */
.logo-dark {
  display: none;
}
.logo-light {
  display: block;
}
:root.dark .logo-dark {
  display: block;
}
:root.dark .logo-light {
  display: none;
}

.motto {
  text-align: right;
  font-style: italic;
  white-space: nowrap;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 640px) {
  .motto {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .motto {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2.5rem 0;
}

.social {
  display: inline-flex;
  color: hsl(var(--accent));
  transition: opacity 0.2s ease;
}

.social:hover {
  opacity: 0.7;
}

.social .icon {
  width: 1.5rem;
  height: 1.5rem;
}