/*
 * theme.css — Nest & Form's design-system values.
 * Clay, moss and linen: a warm terracotta accent over cream and sand grounds,
 * a deep moss reserved for the testimonial band (--x-moss) and dark mode.
 */

:root {
  --canvas: #f5f1ea;
  --surface: #fbf9f6;
  --surface-2: #efe7d9;
  --border: #e2d8c6;
  --border-strong: #c7b89f;
  --ink: #2b2620;
  --muted: #696460;
  --accent: #a85c42;
  --accent-hover: #904c38;
  --accent-ink: #ffffff;
  --accent-text: #8e4f3a;
  --accent-strong: #8e4f3a;
  --accent-soft: #f0ddd2;
  --accent-border: #dcb7a4;
  --success: #5b6b4f;
  --success-ink: #fdf8f3;
  --success-soft: #e4e8da;
  --success-strong: #46543c;
  --warning: #a6702e;
  --warning-ink: #fdf8f3;
  --warning-soft: #f3e6d0;
  --warning-strong: #8f5b1f;
  --danger: #a13d32;
  --danger-ink: #fdf8f3;
  --danger-soft: #f3ddd7;
  --danger-strong: #832f26;
  --chart-1: #b5654a;
  --chart-2: #6b7a52;
  --chart-3: #c9a227;
  --chart-4: #8e4f3a;
  --chart-5: #4a5a43;
  --chart-6: #a68a64;

  /* Nest & Form's own tokens — read only by public/app.css. */
  --x-moss: #2b3324;
  --x-moss-ink: #f1ecdf;
  --x-moss-accent: #d3a37f;
  --x-linen: #ece2d0;
  --x-hero-shade: rgba(30, 24, 16, 0.28);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 560;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 18px;
  --radius-card: 18px;
  --radius-input: 10px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --card-pad: 2rem;
  --shadow-card: 0 1px 2px rgba(35, 26, 16, 0.05), 0 12px 28px -16px rgba(35, 26, 16, 0.18);
  --shadow-raised: 0 4px 10px rgba(35, 26, 16, 0.08), 0 24px 48px -20px rgba(35, 26, 16, 0.28);
  --shadow-btn: 0 1px 2px rgba(35, 26, 16, 0.08);
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 560;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #1e1a15;
  --surface: #28221c;
  --surface-2: #322b22;
  --border: #423a2e;
  --border-strong: #5c5041;
  --ink: #f1ece1;
  --muted: #b2a896;
  --accent: #c97a5c;
  --accent-hover: #d68e72;
  --accent-ink: #1e1a15;
  --accent-text: #e0a084;
  --accent-strong: #e0a084;
  --accent-soft: #3a2b23;
  --accent-border: #5c4234;
  --success: #8a9d73;
  --success-ink: #1e1a15;
  --success-soft: #2b3324;
  --success-strong: #a9c08e;
  --warning: #c99a52;
  --warning-ink: #1e1a15;
  --warning-soft: #392e1c;
  --warning-strong: #e0b878;
  --danger: #c9695a;
  --danger-ink: #1e1a15;
  --danger-soft: #3a241f;
  --danger-strong: #e08e7f;
  --chart-1: #c97a5c;
  --chart-2: #8a9d73;
  --chart-3: #d6b64a;
  --chart-4: #c98a70;
  --chart-5: #6d7f61;
  --chart-6: #b79c76;

  --x-moss: #171f13;
  --x-moss-ink: #f1ecdf;
  --x-moss-accent: #d3a37f;
  --x-linen: #2a2419;
  --x-hero-shade: rgba(10, 8, 5, 0.42);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 28px -16px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 4px 10px rgba(0, 0, 0, 0.3), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/*
 * app.css — Nest & Form's own rules: the linen ground, the two feature
 * bands, the press marquee and the hero's one entrance. Nothing here
 * re-declares a primitive; everything reads theme.css tokens.
 */

body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(60rem 32rem at 12% -8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at 100% 0%, color-mix(in srgb, var(--x-moss) 6%, transparent), transparent 55%);
  background-attachment: fixed;
}

/* ---- Hero entrance — the one moment on the page that moves. Rests fully
   visible; app.js adds .reveal-pending only once it is safe to reverse it,
   so a visitor with JS off (or a capture taken before it runs) sees the
   finished layout, never a blank hole waiting on a script. */
.reveal-up {
  opacity: 1;
  transform: none;
}
.reveal-up.reveal-pending {
  opacity: 0;
  transform: translateY(22px);
}
.reveal-up.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity 760ms var(--ease-out, ease), transform 760ms var(--ease-out, ease);
}
html.reduced-motion .reveal-up.reveal-pending {
  opacity: 1;
  transform: none;
}

/* ---- Press marquee — the only element that moves continuously. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: nf-marquee 34s linear infinite;
}
@keyframes nf-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3334%); }
}
html.reduced-motion .marquee-track {
  animation: none;
}

/* ---- Testimonial band — full-bleed deep moss, set off the linen page. */
.band-moss {
  background-color: var(--x-moss);
  color: var(--x-moss-ink);
}

/* ---- Contact band — linen-sand, a step warmer than the page canvas. */
.band-linen {
  background-color: var(--x-linen);
}