/* ── Landing page scoped design tokens ──────────────────────────────────────
   All vars are scoped to .landing-page so they don't bleed into the
   dashboard or admin routes which use different values for --blue / --gold.
   ─────────────────────────────────────────────────────────────────────────── */

.landing-page {
  /* Brand palette — sourced from the shared registry (src/styles/brand-tokens.css).
     Values are identical to the former local hex; aliased here so .landing-page
     keeps its short --blue/--gold names while the registry stays the SSOT. */
  --blue: var(--brand-blue);
  --blue-dark: var(--brand-blue-dark);
  --blue-light: var(--brand-blue-light);
  --gold: var(--brand-gold);
  --gold-dark: var(--brand-gold-dark);
  --gold-light: var(--brand-gold-light);
  --off-white: var(--brand-off-white);
  --grey-light: var(--brand-grey-light);
  --grey-mid: var(--brand-grey-mid);
  --grey-text: var(--brand-grey-text);
  --dark: var(--brand-dark);
  --dark-2: #2d2a26;

  /* Navy variants (used by HowItWorks, AppDownload, Hero accents) */
  --navy-deep: #001f4d;
  --navy: #003a7a;
  --navy-mid: #0050a1;

  /* Status (replaces inline rainbow in mocks/badges) */
  --success: #1d9e75;
  --success-bg: #e6f7f2;
  --warning: #d48a0a;
  --warning-bg: #fff8e6;
  --danger: #b42318;
  --danger-bg: #fee4e2;

  /* Surfaces & borders (one consistent set) */
  --surface-dark: #0a1428;
  --border-soft: rgba(0, 93, 170, 0.08);
  --border-mid: rgba(0, 93, 170, 0.15);
  --border-strong: rgba(0, 93, 170, 0.25);

  /* Shadow scale (replaces ad-hoc inline shadows) */
  --shadow-sm: 0 1px 2px rgba(0, 30, 80, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 93, 170, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 30, 80, 0.18);
  --shadow-xl: 0 20px 64px rgba(0, 30, 80, 0.28);

  /* Font override — use DM Sans as the body font inside landing */
  font-family: var(--font-dm-sans), system-ui, sans-serif;
  color: var(--dark);
  background-color: white;
}

/* Headings use Playfair inside the landing page */
.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4 {
  font-family: var(--font-playfair), Georgia, serif;
}

.landing-page .font-serif {
  font-family: var(--font-playfair), Georgia, serif;
}

.landing-page .font-sans {
  font-family: var(--font-dm-sans), system-ui, sans-serif;
}

/* ── Layout utilities ──────────────────────────────────────────────────────── */

.landing-page .container-fluid {
  width: 100%;
  padding-left: clamp(1rem, 4vw, 5rem);
  padding-right: clamp(1rem, 4vw, 5rem);
}

.landing-page .section-py {
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

/* ── Numerals ──────────────────────────────────────────────────────────────────
   Money, KPIs, prices and percentages set in DM Mono with tabular figures.
   Financial software reads as trustworthy when its numbers are monospaced and
   align in columns — serif numerals look decorative, not auditable. Apply via
   className="num" on any element whose primary content is a figure. */

.landing-page .num {
  font-family: var(--font-dm-mono), ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* ── Text gradient ─────────────────────────────────────────────────────────── */

.landing-page .text-gradient-gold {
  background: linear-gradient(135deg, #f7a81b 0%, #e8920a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Typography utilities ─────────────────────────────────────────────────────
   Replaces ad-hoc text-[10px], text-[11px], text-[0.6rem], text-[0.65rem],
   text-[0.7rem] scattered across pages with two clear sizes. WCAG-comfortable
   floor of 12px for .text-eyebrow; .text-micro is for non-essential captions
   only (legal disclaimers, timestamps, etc.). */

.landing-page .text-eyebrow {
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.landing-page .text-micro {
  font-size: 0.625rem; /* 10px — caption use only */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ── Animations ────────────────────────────────────────────────────────────── */

@keyframes lp-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

@keyframes lp-float-up {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes lp-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lp-bar-grow {
  from { width: 0%; }
}

.landing-page .animate-pulse-dot {
  animation: lp-pulse-dot 2s ease-in-out infinite;
}

.landing-page .animate-float {
  animation: lp-float-up 3s ease-in-out infinite;
}

.landing-page .animate-float-delayed {
  animation: lp-float-up 3.5s ease-in-out infinite 0.5s;
}

.landing-page .animate-fade-in-up {
  animation: lp-fade-in-up 0.6s ease forwards;
}

/* Scroll-reveal: paired with IntersectionObserver toggling .is-visible.
   Uses class-based opacity/transform instead of inline style mutation so
   React reconciliation isn't fought by direct DOM writes. */
.landing-page .reveal-on-scroll {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.landing-page .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.landing-page .bar-fill {
  animation: lp-bar-grow 1.2s ease 0.3s both;
}

/* ── Ledger strip ──────────────────────────────────────────────────────────────
   Audit-trail mock — monospaced timestamped rows on a deep navy surface. Rows
   settle in one after another so the section reads as transactions landing in
   real time, not a static table. */
@keyframes lp-ledger-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-page .ledger-row {
  opacity: 0;
  animation: lp-ledger-in 0.5s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .ledger-row {
    opacity: 1;
    animation: none;
  }
}

/* Hero entrance — CSS-only so initial paint isn't blank (preserves LCP). */
@keyframes lp-hero-fade-in {
  from { opacity: 0.001; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-page .hero-fade-in {
  animation: lp-hero-fade-in 0.7s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .hero-fade-in { animation: none; }
}

/* ── Dark-microsite scope ─────────────────────────────────────────────────────
   Used by /donor/portal (and any other gold-on-black "luxury" surface that
   stays under the (public) tree but doesn't share marketing's light theme).
   Apply via <div className="dark-microsite"> on the page wrapper. The
   marketing scope (.landing-page) deliberately does NOT define these tokens
   — keeping them isolated prevents accidental dark surfaces leaking into
   the white marketing layout. */
.dark-microsite {
  --surf: #0a1628;
  --surf2: #14213d;
  --surface: #0a1628;
  --brd2: rgba(247, 168, 27, 0.15);
  --txt2: #e8edf5;
  --txt3: #b0bdd0;
  --txt4: #7a8aaa;
  --blue-mid: #0050a1;
  font-family: var(--font-syne), var(--font-dm-sans), system-ui, sans-serif;
  background-color: var(--surf);
  color: var(--txt2);
}

.dark-microsite .font-syne {
  font-family: var(--font-syne), system-ui, sans-serif;
}