@import "tailwindcss";

@theme {
  --color-page: #f5f5f4;
  --color-band: #ededec;
  --color-ink: #1f1f1f;
  --color-muted: #5c5c5c;
  --color-copper: #a35f2c;
  --color-copper-light: #d9895a;
  --color-night: #1e1e1e;
  --font-sans: "Poppins", system-ui, sans-serif;
  --font-brand: "Nunito Sans", "Avenir Next", "Avenir", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Images that stay put while the page scrolls past them (as on the current site). */
.fixed-bg {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Phones and tablets ignore fixed backgrounds or render them badly, so scroll normally there. */
@media (hover: none), (max-width: 768px) {
  .fixed-bg { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .fixed-bg { background-attachment: scroll; }
  html { scroll-behavior: auto; }
}

.line-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  padding: 0.35rem 0;
  font-size: 0.875rem;
  outline: none;
}
.line-input:focus { border-bottom-color: var(--color-copper-light); }