/* =========================================================================
   Dark marketing theme — landing page, guest pricing page, and the full
   auth flow (login/signup/forgot/reset/verify/2FA all share one layout,
   so they go dark together rather than half-matching).

   Deliberately NOT loaded by app.php / admin.php / onboarding.php — the
   logged-in product keeps its existing light Stripe/Linear-style theme
   untouched. This file is only ever included:
     - unconditionally by views/layouts/auth.php
     - conditionally by views/layouts/marketing.php, when the controller
       passes ['dark' => true] (landing page, guest pricing page) — terms
       and privacy still render the original light marketing theme.

   Strategy: design-system.css already expresses almost every color as a
   `--rd-*` custom property, so most of this file just redefines those
   tokens to their dark equivalents (loaded after design-system.css, same
   selectors, later source wins - no !important needed anywhere). A
   handful of rules in design-system.css/marketing.css/auth.css hardcode
   a literal `#fff` or a light rgba() instead of a token (card/button/input
   backgrounds, the nav/hero backgrounds) - those get direct overrides
   below. Everything else is new: the eyebrow pill / icon box / tag /
   checklist / blob / spotlight-row / CTA-banner components the design
   spec calls for, which design-system.css has no equivalent of yet.
   ========================================================================= */

:root {
  /* Neutral ramp, inverted for a dark page. ink-900/ink-950/primary-900/
     primary-700 are deliberately NOT touched: those already ARE dark navy
     values (#141C5C/#1B1D27) and are only ever used as "a panel darker
     than the page" (auth brand panel, CTA banner, the review-ring hole) -
     on a light page that meant near-black; on a dark page that still
     correctly means "a bit darker still", so remapping them would break
     the one or two components that intentionally use them as a dark
     accent rather than as body text. */
  --rd-ink-50: #0A0E17;                 /* page background */
  --rd-ink-100: rgba(255,255,255,.06);  /* subtle hover fill */
  --rd-ink-200: rgba(255,255,255,.08);  /* card / divider borders */
  --rd-ink-300: rgba(255,255,255,.14);  /* input / button borders */
  --rd-ink-400: #64748B;                /* very muted text, placeholders */
  --rd-ink-500: #7C8394;                /* muted text */
  --rd-ink-600: #AEB4C2;                /* secondary text */
  --rd-ink-700: #C7CBD6;                /* labels, nav links */
  --rd-ink-800: #F4F5F8;                /* primary text, headings */

  /* Primary interactive color across reused components (links, focus
     rings, checkboxes, .btn-primary) maps to the spec's blue accent -
     teal is reserved for the new bespoke marketing components below,
     giving the two-tone split the spec asks for (rule 5) without every
     shared control needing a teal/blue choice made for it individually. */
  --rd-primary-50: rgba(59,130,246,.10);
  --rd-primary-100: rgba(59,130,246,.18);
  --rd-primary-200: rgba(59,130,246,.30);
  --rd-primary-400: #60A5FA;
  --rd-primary-500: #3B82F6;
  --rd-primary-600: #2563EB;

  --rd-success: #34D399;
  --rd-success-bg: rgba(52,211,153,.10);
  --rd-success-text: #6EE7B7;
  --rd-warning: #FBBF24;
  --rd-warning-bg: rgba(251,191,36,.10);
  --rd-warning-text: #FCD34D;
  --rd-error: #F87171;
  --rd-error-hover: #EF4444;
  --rd-error-active: #DC2626;
  --rd-error-bg: rgba(248,113,113,.10);
  --rd-error-text: #FCA5A5;
  --rd-info: #60A5FA;
  --rd-info-bg: rgba(59,130,246,.10);
  --rd-info-text: #93C5FD;

  --rd-font-body: 'Manrope', sans-serif;

  --rd-shadow-card: none;
  --rd-shadow-elevated: 0 20px 50px rgba(0,0,0,.35);
  --rd-shadow-btn-primary: 0 10px 30px rgba(30,64,175,.4);

  /* New tokens for the bespoke dark components only - not part of the
     shared design-system.css palette, so no naming collision risk. */
  --md-teal: #5EEAD4;
  --md-blue: #3B82F6;
  --md-card-teal: #0D1A1E;
  --md-card-blue: #0D1220;
}

/* ---------- Literal-color fixes on reused shared components ----------
   These few rules in design-system.css/auth.css hardcode #fff instead of
   a token, so the variable remap above can't reach them. */
.card, .empty-state {
  background: rgba(255,255,255,.03);
}
.btn-secondary, .form-control, .oauth-btn {
  background: rgba(255,255,255,.03);
}
.btn-secondary:hover:not(:disabled) { background: rgba(59,130,246,.08); }
.oauth-btn:hover { background: rgba(255,255,255,.06); }
.oauth-btn .g-mark { background: rgba(255,255,255,.1); color: #F4F5F8; }

/* .rd-mono and .badge-pro intentionally used the dark end of the ramp
   (primary-900) for contrast against a light page - that end of the ramp
   is unchanged here on purpose (see comment above), so both need a direct
   fix instead of inheriting a remapped variable. */
.rd-mono { color: var(--rd-ink-700); }

/* .chart-donut .val punches a "hole" the same color as whatever card it
   sits on to fake a ring - it hardcodes #fff for that because every card
   it used to appear on was white. Dark cards vary (neutral/teal/blue
   tinted), so this picks one dark neutral close to all three rather than
   a separate override per card variant. */
.chart-donut .val { background: #10151F; }
.badge-pro {
  background: rgba(59,130,246,.14);
  color: #93C5FD;
  border: 1px solid rgba(59,130,246,.3);
}

/* ---------- Nav / footer (marketing.css defines these structurally;
   only the literal backgrounds need overriding here) ---------- */
.nav {
  background: rgba(10,14,23,.85);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero { background: none; }
.site-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(120deg,#0D1220 0%,#0A0E17 60%);
}

/* marketing.css already collapses .nav-links to display:none under
   800px; the toggle button existed but had nothing to target
   (data-nav-toggle with no matching data-nav-menu), so it did nothing.
   Giving the dark nav's .nav-links that attribute (see layout) plus an
   .is-open state here makes the mobile menu actually open. */
@media (max-width: 800px) {
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10,14,23,.97); backdrop-filter: blur(10px);
    padding: 16px clamp(20px,5vw,56px) 20px; border-bottom: 1px solid rgba(255,255,255,.08);
  }
}

/* ---------- Section rhythm ---------- */
/* overflow: hidden matches .hero and .md-cta-banner, which already clip
   their own .md-blob decoration this way - .md-section was the one
   container that didn't, so every section's blob (each placed with a
   negative left/right offset for the atmospheric glow effect) bled past
   the edge and widened the whole page horizontally on narrow screens
   (confirmed live: page was 600px wide inside a 500px viewport, and every
   offending element was one of these blobs). */
.md-section { padding: clamp(72px,9vw,120px) clamp(20px,5vw,56px); max-width: 1180px; margin: 0 auto; position: relative; overflow: hidden; }
.md-section-header { max-width: 620px; margin: 0 auto 44px; text-align: center; position: relative; z-index: 1; }

/* ---------- Atmosphere blobs ----------
   Position/size vary per instance, so those stay inline on the element;
   this just fixes color, blur, and non-interactivity once. */
.md-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(0px); z-index: 0; }
.md-blob.teal { background: radial-gradient(circle, rgba(94,234,212,.12), transparent 70%); }
.md-blob.blue { background: radial-gradient(circle, rgba(59,130,246,.12), transparent 70%); }

/* ---------- Eyebrow pill ---------- */
.md-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px 'Manrope', sans-serif; padding: 7px 16px; border-radius: 100px;
  background: rgba(94,234,212,.1); color: var(--md-teal);
  border: 1px solid rgba(94,234,212,.25);
}
.md-pill.blue { background: rgba(59,130,246,.1); color: #93C5FD; border-color: rgba(59,130,246,.25); }

/* ---------- Cards ---------- */
.md-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 26px;
  position: relative;
}
.md-card.teal, .md-card.blue {
  border-radius: 20px; padding: 32px 28px; overflow: hidden;
}
.md-card.teal { border: 1px solid rgba(94,234,212,.2); background: var(--md-card-teal); }
.md-card.blue { border: 1px solid rgba(59,130,246,.18); background: var(--md-card-blue); }
.md-card.teal .md-blob, .md-card.blue .md-blob { top: -50px; right: -50px; width: 180px; height: 180px; }

/* ---------- Featured plan card (pricing) ----------
   A colored banner physically fused to the top of the card, like a
   "most popular" flag - rather than a small badge floating in a corner,
   which is easy to miss. .md-plan-card takes over the padding normally
   applied by .md-card.blue/.teal (moved to .md-plan-card-body instead)
   so the banner can span edge-to-edge and still respect the card's own
   border-radius via the shared overflow:hidden. */
.md-plan-card { padding: 0 !important; }
.md-plan-banner {
  background: linear-gradient(135deg, #3B82F6, #1E40AF);
  color: #fff; font: 700 12.5px 'Manrope', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  text-align: center; padding: 12px 20px; position: relative; z-index: 1;
}
.md-plan-card-body { padding: 28px 28px 32px; position: relative; }

/* ---------- Icon box ---------- */
.md-icon-box {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(94,234,212,.1); border: 1px solid rgba(94,234,212,.18);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.md-icon-box.blue { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.18); }

/* ---------- Tag / badge ---------- */
.md-tag {
  display: inline-block; font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-teal); background: rgba(94,234,212,.08); border: 1px solid rgba(94,234,212,.18);
  padding: 4px 10px; border-radius: 6px;
}
.md-tag.blue { color: #93C5FD; background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.18); }

/* ---------- Checklist item ---------- */
.md-check-list { display: flex; flex-direction: column; gap: 10px; }
.md-check-item { display: flex; align-items: flex-start; gap: 10px; font: 500 13.5px/1.45 'Manrope', sans-serif; color: #CBD5E1; }
.md-check-item .dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px;
  background: rgba(94,234,212,.12); border: 1px solid rgba(94,234,212,.28);
  display: flex; align-items: center; justify-content: center;
}
.md-check-item.blue .dot { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.28); }

/* ---------- Buttons ----------
   .btn / .btn-primary / .btn-secondary / .btn-block already exist and are
   reused as-is (their colors flip via the token remap above); this adds
   the one new treatment the spec calls for that has no existing
   equivalent - an outlined teal button for links to another internal
   page, as distinct from a primary conversion CTA. */
.btn-primary { background: linear-gradient(135deg, #3B82F6, #1E40AF); }
.btn-outline-teal {
  background: rgba(94,234,212,.08); color: var(--md-teal);
  border: 1px solid rgba(94,234,212,.25);
}
.btn-outline-teal:hover:not(:disabled) { background: rgba(94,234,212,.14); }

/* ---------- Layout patterns ---------- */
.md-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 24px; }
.md-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
.md-spotlight { display: flex; flex-wrap: wrap; gap: 52px; align-items: center; margin-bottom: 100px; position: relative; z-index: 1; }
.md-spotlight:last-child { margin-bottom: 0; }
.md-spotlight > div { flex: 1 1 380px; min-width: 300px; }
.md-spotlight.reverse { flex-direction: row-reverse; }

/* ---------- CTA banner ---------- */
.md-cta-banner {
  border-radius: 24px; background: linear-gradient(120deg,#152049,#0F1A38);
  border: 1px solid rgba(255,255,255,.08); padding: clamp(36px,6vw,64px);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
}
.md-cta-banner h2, .md-cta-banner p { position: relative; }
.md-cta-banner .md-blob { top: -100px; right: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(94,234,212,.16), transparent 70%); }
.md-cta-banner .btn-white {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font: 700 15px 'Manrope', sans-serif; padding: 15px 28px; border-radius: 9px;
  text-decoration: none; background: #fff; color: #0A0E17;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: .02s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .06s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .10s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .14s; }

/* ---------- Guest pricing page (reuses billing.css's .segmented/.bill-*
   structural classes - only the one literal white "active" pill needs a
   dark equivalent). ---------- */
.segmented { background: rgba(255,255,255,.06); }
.segmented a.is-active { background: rgba(59,130,246,.16); color: #93C5FD; box-shadow: none; }

/* ---------- Responsive nav split (matches the spec's dc-desktop/
   dc-mobile convention, named to fit this project's md- prefix) ---------- */
.md-desktop-only { display: flex; }
.md-mobile-only { display: none; }
@media (max-width: 1079px) {
  .md-desktop-only { display: none; }
  .md-mobile-only { display: flex; }
}