/*
 * theme.css — Marigold Lane. Berry brand, blush neutrals, one marigold accent
 * used at large scale only. Dark mode is an aubergine night with a marigold fill.
 */

:root {
  --canvas: #fbf4f1;
  --surface: #ffffff;
  --surface-2: #f5e4de;
  --border: #ead3cc;
  --border-strong: #c9a79f;
  --ink: #2a1220;
  --muted: #6e5560;
  --accent: #8e1b52;
  --accent-hover: #751543;
  --accent-ink: #ffffff;
  --accent-text: #8e1b52;
  --accent-strong: #6f1240;
  --accent-soft: #f6dde6;
  --accent-border: #e3b5c8;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dcefe2;
  --success-strong: #11602f;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f7e5d2;
  --warning-strong: #8f410a;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f6dcdc;
  --danger-strong: #a01818;
  --chart-1: #8e1b52;
  --chart-2: #e58a1f;
  --chart-3: #4f6b3a;
  --chart-4: #2f6f8a;
  --chart-5: #b4544a;
  --chart-6: #6a4c93;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.045em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 0.875rem;

  --x-marigold: #e58a1f;
  --x-band-bg: #3a0f2a;
  --x-band-ink: #fbeff3;
  --x-band-muted: #d9b8c8;
}

html[data-theme="dark"] {
  --canvas: #1a0b14;
  --surface: #261120;
  --surface-2: #331829;
  --border: #4a2a3e;
  --border-strong: #6e4a60;
  --ink: #fbeff3;
  --muted: #c7aab9;
  --accent: #f0a04b;
  --accent-hover: #f6b567;
  --accent-ink: #2a1220;
  --accent-text: #f3a957;
  --accent-strong: #f7c58c;
  --accent-soft: #432338;
  --accent-border: #6b4630;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #16301f;
  --success-strong: #6fbe8a;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #e0a068;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #e08c8c;
  --chart-1: #f0a04b;
  --chart-2: #e27aa6;
  --chart-3: #8fb06f;
  --chart-4: #5fb0cf;
  --chart-5: #e08a80;
  --chart-6: #a68bd4;

  --x-marigold: #f0a04b;
  --x-band-bg: #2a0a1e;
  --x-band-ink: #fbeff3;
  --x-band-muted: #c7aab9;
}

/*
 * app.css — Marigold Lane's own CSS: the full-bleed hero, the dark statement
 * band, and the scroll motion (hero settle, parallax, section reveals).
 */

/* ---- Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  overflow: hidden;
  background: var(--x-band-bg);
}
.hero-photo { position: absolute; inset: -4rem 0 0 0; will-change: transform; }
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-settle 1600ms var(--ease-out, ease-out) both;
}
.hero-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.12) 100%);
}
.hero-bar, .hero-copy { position: relative; z-index: 1; }
.hero-ink, .hero-title { color: var(--x-band-ink); }
.hero-ink:hover { color: var(--x-band-ink); }
.hero-bar nav a { opacity: 0.9; }
.hero-bar nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.hero .btn-ghost.hero-ink:hover { background: color-mix(in srgb, var(--x-band-ink) 16%, transparent); }
.hero .btn-ghost.hero-ink { color: var(--x-band-ink); }

/* ---- Statement band ----------------------------------------------------- */
.band-dark { background: var(--x-band-bg); color: var(--x-band-ink); }
.band-muted { color: var(--x-band-muted); }
.text-marigold { color: var(--x-marigold); }

/* ---- Motion --------------------------------------------------------------- */
@keyframes hero-settle {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* Elements rest visible. app.js adds .reveal-in as one enters the viewport,
   and the entrance runs from a small offset. */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: none; }
}
.reveal-in {
  animation: reveal-up 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Photographs also unveil: the image eases in from a slight zoom. */
@keyframes reveal-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.media.reveal-in > img { animation: reveal-zoom 1400ms cubic-bezier(0.22, 1, 0.36, 1) both; }

html.reduced-motion .hero-photo img,
html.reduced-motion .reveal-in,
html.reduced-motion .media.reveal-in > img { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-photo img, .reveal-in, .media.reveal-in > img { animation: none; }
  .hero-photo { transform: none !important; }
}

/* Smooth anchor jumps, with room for the content to breathe under the top. */
html:not(.reduced-motion) { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 1.5rem; }