/*
 * theme.css — Longview Estate. Old-money quiet luxury: cream paper, deep
 * leaf-ink green, a single second-flush amber. 2px corners, no card shadow,
 * a serif display (Fraunces) over a plain sans body (Inter).
 */

:root {
  --canvas: #f6f1e6;
  --surface: #fbf9f4;
  --surface-2: #efe6d2;
  --border: #e1d6bd;
  --border-strong: #c7b795;
  --ink: #1f3327;
  --muted: #5b635a;

  --accent: #1f3327;
  --accent-hover: #2a4433;
  --accent-ink: #f6f1e6;
  --accent-text: #8b5a20;
  --accent-strong: #1f3327;
  --accent-soft: #e7e0c9;
  --accent-border: #cdbb90;

  --success: #2f6b3f;
  --success-ink: #ffffff;
  --success-soft: #e3ede4;
  --success-strong: #245530;
  --warning: #96591c;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6d3;
  --warning-strong: #7c4813;
  --danger: #8c2f2f;
  --danger-ink: #ffffff;
  --danger-soft: #f3dede;
  --danger-strong: #732424;

  --chart-1: #1f3327;
  --chart-2: #8b5a20;
  --chart-3: #5b635a;
  --chart-4: #a97142;
  --chart-5: #3f5c46;
  --chart-6: #c9a227;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --shadow-raised: 0 16px 40px color-mix(in srgb, var(--ink) 16%, transparent);
  --card-pad: 2rem;
  --caps: uppercase;
  --caps-tracking: 0.12em;
  --btn-weight: 500;
  --measure: 62ch;

  --x-hero-ink: #f8f3e6;
  --x-hero-scrim: linear-gradient(180deg, rgba(10, 14, 10, 0) 0%, rgba(10, 14, 10, 0.1) 45%, rgba(10, 14, 10, 0.78) 100%);
  --x-band-bg: #16241b;
  --x-band-ink: #f6f1e6;
  --x-band-accent: #cdae6c;
}

html[data-theme="dark"] {
  --canvas: #16211a;
  --surface: #1c2a21;
  --surface-2: #233328;
  --border: #324035;
  --border-strong: #48594a;
  --ink: #f1ead6;
  --muted: #b3bca8;

  --accent: #cdae6c;
  --accent-hover: #dabd83;
  --accent-ink: #1c2a1f;
  --accent-text: #d9b872;
  --accent-strong: #e6d9b3;
  --accent-soft: #2b3a2c;
  --accent-border: #4a5a44;

  --success: #4c8f5c;
  --success-ink: #0f2015;
  --success-soft: #1c3324;
  --success-strong: #8fcb9c;
  --warning: #c98a3f;
  --warning-ink: #1f1206;
  --warning-soft: #3a2a15;
  --warning-strong: #e3b06e;
  --danger: #c96a6a;
  --danger-ink: #200f0f;
  --danger-soft: #3a1e1e;
  --danger-strong: #e59a9a;

  --chart-1: #cdae6c;
  --chart-2: #8fbf9a;
  --chart-3: #b3bca8;
  --chart-4: #c98a3f;
  --chart-5: #6f9a78;
  --chart-6: #e6d9b3;

  --shadow-raised: 0 16px 40px color-mix(in srgb, black 40%, transparent);

  --x-hero-ink: #f8f3e6;
  --x-hero-scrim: linear-gradient(180deg, rgba(10, 14, 10, 0) 0%, rgba(10, 14, 10, 0.1) 45%, rgba(10, 14, 10, 0.78) 100%);
  --x-band-bg: #16241b;
  --x-band-ink: #f6f1e6;
  --x-band-accent: #cdae6c;
}

/*
 * app.css — Singalila Estate. What no primitive covers: the hero-overlay
 * bar's transparent-to-solid state, the scrim and cream ink over the hero
 * photograph, the tinted and dark statement bands, the underlined
 * newsletter fields and the quote mark. Motion is the hero photograph's
 * parallax alone — nothing else on the page moves.
 */

/* ---- The bar: transparent over the hero, solid once scrolled past it --- */
.site-bar {
  color: var(--x-hero-ink);
  /* A constant dark wash behind the bar (not the whole hero) so the cream
     wordmark and links stay readable whatever the photo underneath looks
     like — the mist near the top of this photograph is pale enough that
     cream-on-photo alone fails. */
  background: color-mix(in srgb, black 80%, transparent);
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, backdrop-filter 280ms ease;
  border-bottom: 1px solid transparent;
}
.site-bar.is-solid {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
  color: var(--ink);
}
/* The theme toggle is a .btn-ghost, which paints its own muted ink; make it
   follow the bar's colour instead, so it reads over the photo too. */
.site-bar .theme-toggle { color: inherit; }
.site-bar .theme-toggle:hover { color: inherit; opacity: 0.75; }

/* ---- The hero: full-bleed photo, scrim, cream headline ------------------ */
.hero { background: var(--x-band-bg); }
.hero-media { will-change: transform; }
.hero-media img { display: block; }
.hero-scrim { background: var(--x-hero-scrim); }
.hero-ink { color: var(--x-hero-ink); }
.hero-ink-muted { color: color-mix(in srgb, var(--x-hero-ink) 78%, transparent); }

html.reduced-motion .hero-media { transform: none !important; }

/* ---- The estate band: a deeper-cream tint, no card chrome --------------- */
.band-tint { background: var(--surface-2); }

/* ---- The closing band: a fixed dark ink-green, regardless of the mode --- */
.band-dark { background: var(--x-band-bg); }
.band-ink { color: var(--x-band-ink); }
.band-muted { color: color-mix(in srgb, var(--x-band-ink) 68%, transparent); }
.band-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--x-band-ink) 68%, transparent);
}
.band-divider { border-top: 1px solid color-mix(in srgb, var(--x-band-ink) 25%, transparent); }
.band-error { color: color-mix(in srgb, var(--x-band-ink) 90%, transparent); }

/* The one filled button inside the dark band: cream fill, ink label. */
.btn-band {
  background: var(--x-band-ink);
  border-color: var(--x-band-ink);
  color: var(--x-band-bg);
}
.btn-band:hover {
  background: color-mix(in srgb, var(--x-band-ink) 88%, transparent);
  border-color: color-mix(in srgb, var(--x-band-ink) 88%, transparent);
}

/* Underlined fields for the tasting-list form — no box, a line that lifts
   to the estate gold on focus. */
.uline-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--x-band-ink) 35%, transparent);
  border-radius: 0;
  padding: 0.5rem 0;
  color: var(--x-band-ink);
  font-size: 1rem;
  transition: border-color 200ms ease;
}
.uline-input::placeholder { color: color-mix(in srgb, var(--x-band-ink) 45%, transparent); }
.uline-input:focus {
  outline: none;
  border-bottom-color: var(--x-band-accent);
  box-shadow: none;
}

/* A small opening mark on each drinker's quote. */
.quote-mark::before {
  content: "\201C";
  color: var(--accent-text);
  margin-right: 0.125em;
}