/* ============================================================
   Design hub — DARK theme (separate file, loaded after
   design-hub.css). Activates only with html[data-theme="dark"].
   Strategy: flip the --d-* design tokens (re-colours ~everything
   that uses them) + patch the few hard-coded light spots.
   ============================================================ */

html[data-theme="dark"] body.design-hub-page {
  --d-bg: #141009;
  --d-bg-warm: #1c1710;
  --d-ink: #f4ece0;
  --d-ink-soft: #d4cbbb;
  --d-muted: #a89e8d;
  --d-line: rgba(244, 236, 224, .14);
  --d-line-soft: rgba(244, 236, 224, .07);
  --d-gold: #dcbd93;
  --d-gold-soft: rgba(220, 189, 147, .22);
  --d-surface: #1f1912;
  --d-shadow: 0 30px 66px -30px rgba(0, 0, 0, .72);

  background:
    radial-gradient(1100px 640px at 50% -12%, rgba(220, 189, 147, .12), transparent 62%),
    radial-gradient(900px 600px at 100% 8%, rgba(120, 110, 92, .10), transparent 60%),
    var(--d-bg) !important;
  color: var(--d-ink);
}

html[data-theme="dark"] body.design-hub-page ::selection {
  background: rgba(220, 189, 147, .26);
}

/* Muted bands: subtle warm lift instead of the light wash */
html[data-theme="dark"] body.design-hub-page .design-section--muted {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)),
    var(--d-bg-warm);
  border-top-color: var(--d-line-soft);
  border-bottom-color: var(--d-line-soft);
}

/* Buttons are <a> elements; a global dark rule forces links to
   color:inherit (they'd pick up the navy nav colour). Pin button
   text explicitly with !important. */
html[data-theme="dark"] body.design-hub-page .design-btn--primary {
  color: #1a140c !important;
}

html[data-theme="dark"] body.design-hub-page .design-btn--light,
html[data-theme="dark"] body.design-hub-page .design-btn--ghost {
  color: var(--d-ink) !important;
}

html[data-theme="dark"] body.design-hub-page .design-btn--light:hover,
html[data-theme="dark"] body.design-hub-page .design-btn--ghost:hover {
  color: var(--d-gold) !important;
}

/* Primary buttons: gold pill with dark ink (the light-ink default
   would be invisible once --d-ink turns light) */
html[data-theme="dark"] body.design-hub-page .design-btn--primary {
  background: linear-gradient(135deg, #eccea6, #c99b66);
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .7);
}

html[data-theme="dark"] body.design-hub-page .design-btn--primary:hover {
  background: linear-gradient(135deg, #f4dcb8, #d6aa78);
}

/* Featured cards: gold-only tint (drop the white wash) */
html[data-theme="dark"] body.design-hub-page .design-route-card--main {
  background:
    linear-gradient(135deg, rgba(220, 189, 147, .15), rgba(220, 189, 147, .02)),
    var(--d-surface);
  border-color: var(--d-gold-soft);
}

/* Local nav: dark glass */
html[data-theme="dark"] body.design-hub-page .design-local-nav {
  background: rgba(28, 23, 16, .82);
  border-color: var(--d-line-soft);
}

html[data-theme="dark"] body.design-hub-page .design-context {
  background: rgba(31, 25, 18, .9);
}

html[data-theme="dark"] body.design-hub-page .design-context__parent {
  background: linear-gradient(135deg, #eccea6, #c99b66);
}

html[data-theme="dark"] body.design-hub-page .design-context__parent strong {
  color: #1a140c;
}

html[data-theme="dark"] body.design-hub-page .design-context__links a {
  border-color: transparent;
  background: transparent;
}

html[data-theme="dark"] body.design-hub-page .design-context__links a:hover,
html[data-theme="dark"] body.design-hub-page .design-context__links a[aria-current="page"],
html[data-theme="dark"] body.design-hub-page .design-context__links a[aria-current="true"],
html[data-theme="dark"] body.design-hub-page .design-context__links a.is-active {
  color: #1a140c;
  border-color: transparent;
  background: linear-gradient(135deg, #eccea6, #c99b66);
}

/* Closing CTA: lift it off the dark page with a gold glow + hairline */
html[data-theme="dark"] body.design-hub-page .design-final {
  background:
    radial-gradient(700px 400px at 50% -10%, rgba(220, 189, 147, .22), transparent 62%),
    linear-gradient(150deg, #261e14, #17120b);
  border: 1px solid var(--d-line);
}

/* FAQ open marker already gold via var; nothing else needed */