/*
 * theme.css — Petal & Stem. A Jaipur florist: petal-white ground, deep
 * stem-green statement band, berry-rose accent. Photograph-led and warm.
 */

:root {
  --canvas: #fdf6f4;
  --surface: #ffffff;
  --surface-2: #f6e9e6;
  --border: #ecd9d4;
  --border-strong: #cfb2ab;
  --ink: #1d2b22;
  --muted: #5f6b62;
  --accent: #a3234f;
  --accent-hover: #861c41;
  --accent-ink: #ffffff;
  --accent-text: #a3234f;
  --accent-strong: #7d1a3b;
  --accent-soft: #f8e0e7;
  --accent-border: #e3a8b9;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dcefe3;
  --success-strong: #126b34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e7d6;
  --warning-strong: #8f4108;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7dfdf;
  --danger-strong: #a01818;
  --chart-1: #a3234f;
  --chart-2: #1d2b22;
  --chart-3: #c27a12;
  --chart-4: #4d7a3a;
  --chart-5: #0b5668;
  --chart-6: #5152a5;

  --x-band-bg: #1d2b22;
  --x-band-ink: #fdf6f4;
  --x-band-muted: #b9c6bb;
  --x-band-line: #3a4d40;
  --x-hero-ink: #ffffff;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.12em;

  --radius-btn: 999px;
  --radius-card: 1.5rem;
}

html[data-theme="dark"] {
  --canvas: #121c16;
  --surface: #1b2a21;
  --surface-2: #233529;
  --border: #33473a;
  --border-strong: #536c5d;
  --ink: #f6efe9;
  --muted: #aab6ab;
  --accent: #e0698a;
  --accent-hover: #ea84a0;
  --accent-ink: #1a0f13;
  --accent-text: #f08aa5;
  --accent-strong: #f7b9c9;
  --accent-soft: #3a2430;
  --accent-border: #6b3a4d;
  --success: #3d9d62;
  --success-ink: #0d1f15;
  --success-soft: #173324;
  --success-strong: #7fc79b;
  --warning: #d4883a;
  --warning-ink: #1f1407;
  --warning-soft: #3a2a17;
  --warning-strong: #e0a566;
  --danger: #e06b6b;
  --danger-ink: #230d0d;
  --danger-soft: #3b1f21;
  --danger-strong: #eda0a0;
  --chart-1: #e0698a;
  --chart-2: #f6efe9;
  --chart-3: #e0a03d;
  --chart-4: #7fb468;
  --chart-5: #3fb0c9;
  --chart-6: #8d8ee0;

  --x-band-bg: #0a120d;
  --x-band-ink: #f6efe9;
  --x-band-muted: #a3b2a6;
  --x-band-line: #2a3c30;
  --x-hero-ink: #ffffff;
}

/*
 * app.css — Petal & Stem's own CSS: the dark hours band, the hero scrim,
 * and the one moment that moves (gallery photographs rising into view).
 */

html {
  scroll-behavior: smooth;
}
html.reduced-motion {
  scroll-behavior: auto;
}

/* A wash so white type reads on any photograph. */
.hero-scrim {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.52) 52%,
    rgba(0, 0, 0, 0.30) 100%
  );
}

/* The statement band: deep stem green, in both modes. */
.band-dark {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}
.band-dark .band-muted {
  color: var(--x-band-muted);
}
.band-dark .band-line {
  border-color: var(--x-band-line);
}

/* Gallery: rests visible, rises from an offset once on entering view. */
@keyframes petal-rise {
  from {
    transform: translateY(1.75rem);
  }
  to {
    transform: translateY(0);
  }
}
.rise.is-in {
  animation: petal-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.rise-2.is-in {
  animation-delay: 0.12s;
}
.rise-3.is-in {
  animation-delay: 0.24s;
}
html.reduced-motion .rise.is-in {
  animation: none;
}


/* Keep display-heading words clearly separated instead of visually running together. */
.font-display {
  word-spacing: normal;
}