/* ════════════════════════════════════════════════════════════════════════
 * BUNYAN BRAND OVERRIDE LAYER (v1)
 *
 * Re-skins the legacy `.styles.css` markup to the new brand system.
 * Loaded AFTER styles.css so it wins by source-order. Uses high (but not
 * abusive) specificity instead of !important wherever possible.
 *
 * Theme direction: WARM SAUDI LUXURY (cream + stone + gold + palm green).
 * Replaces the dark-on-black aesthetic with Diriyah-grade cream surfaces.
 *
 * Map of legacy → new:
 *   --green    → --bn-palm-500    (kept as a trust accent only)
 *   --gold     → --bn-gold-400    (refined warmer gold)
 *   --sand     → --bn-sand-50     (lighter cream)
 *   --dark     → REMOVED — body is now light
 *   --grad     → --grad-stone     (warm stone, not green→gold)
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 0. Legacy variable retargeting (palette flip in one place) ───────── */
:root {
  --green:       var(--bn-palm-500);
  --green-light: var(--bn-palm-400);
  --green-dark:  var(--bn-palm-600);
  --gold:        var(--bn-gold-400);
  --gold-light:  var(--bn-gold-300);

  /* CRITICAL — `--sand` was the foreground (cream text) on the old dark
   * theme. The legacy CSS uses it in 30+ `color:` rules. Retarget to dark
   * ink so all that text becomes readable on the new cream surface.
   * Background usages of --sand (like .mouse span) are patched explicitly. */
  --sand:        var(--bn-ink);

  /* theme-diriyah.css defines its own cream palette (`--paper*`) used for
   * the hero headline, tagline and lead. Same flip — retarget to dark ink
   * so the headline becomes legible on the new cream canvas. The 4 places
   * that used `--paper` as a BACKGROUND are patched explicitly below. */
  --paper:       var(--bn-ink-strong);
  --paper-dim:   var(--bn-ink-soft);
  --paper-faint: var(--bn-stone-500);
  --night:       var(--bn-sand-50);   /* dark-theme night = now light surface */
}

/* Patches for the 4 elements that used --paper as a BACKGROUND
 * (we don't want those to flip to dark — they should stay light surfaces). */
.hero .btn-primary,
.hero .btn-primary.lg,
.wizard-foot .btn-primary {
  background: var(--grad-stone) !important;
  color: #fff !important;
}
#va-mic-btn { background: var(--grad-gold) !important; color: var(--bn-ink-strong) !important; }
.auth-submit-btn { background: var(--grad-stone) !important; color: #fff !important; }

:root {

  --dark:        var(--bn-ink);
  --dark-2:      var(--bn-stone-700);
  --dark-3:      var(--bn-stone-500);
  --border:      var(--color-border);
  --grad:        var(--grad-stone);      /* primary gradient: warm stone */
  --grad-warm:   var(--grad-gold);
}

/* Patch the only background that uses --sand directly */
.mouse span { background: var(--bn-stone-500) !important; }

/* ── 1. Document base — flip from dark to warm cream ──────────────────── */
html, body {
  background: var(--bn-sand-50) !important;   /* override #0A0F0D */
  color: var(--bn-ink) !important;
  font-family: var(--font-sans-ar);
  -webkit-font-smoothing: antialiased;
}
body {
  background-image:
    radial-gradient(ellipse at 90% -10%, rgba(201,164,90,.08), transparent 50%),
    radial-gradient(ellipse at -10% 110%, rgba(14,122,63,.06), transparent 50%);
  background-attachment: fixed;
  line-height: var(--lh-normal);
}

/* Headings — Plex Sans Arabic 800 for display */
h1, h2, h3, h4 {
  color: var(--bn-ink-strong);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
}
h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); }
h2 { font-size: var(--text-3xl); line-height: var(--lh-tight); margin-bottom: var(--space-3); }
h3 { font-size: var(--text-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--text-lg); line-height: var(--lh-snug); font-weight: 700; }
p  { color: var(--bn-ink-soft); }

/* Gold shimmer text — keep but use the new gold.
 * IMPORTANT: use `background-image` (not the `background` shorthand) so we
 * don't accidentally reset `background-clip: text` set by the legacy rule. */
.grad {
  background-image: linear-gradient(90deg, #b08840 0%, #ddc086 40%, #f7e6b8 60%, #b08840 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ── 2. Navbar — switch from black-glass to cream-glass ───────────────── */
.nav {
  background: rgba(254, 252, 246, 0.78) !important;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(107, 85, 48, .12) !important;
  box-shadow: 0 1px 0 rgba(36, 26, 14, .03);
}
/* Nav links — dark ink instead of light */
.nav-links a {
  color: var(--bn-stone-600);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--bn-gold-500);
}
/* Lockup INSIDE nav should now use the ink tones (overrides earlier dark rule) */
.nav .bunyan-lockup .bunyan-mark { color: var(--bn-stone-700) !important; }
.nav .bunyan-lockup .bw-ar       { color: var(--bn-ink-strong) !important; }
.nav .bunyan-lockup .bw-en       { color: var(--bn-stone-500) !important; }

/* ── 3. Buttons — unified stone + gold language ───────────────────────── */
.btn-primary,
.btn-ghost,
.btn-danger-outline,
.upsell-upgrade-btn,
button.danger,
button.btn-primary,
button.btn-ghost {
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition:
    transform var(--dur-fast) var(--ease-out-soft),
    box-shadow var(--dur-base) var(--ease-out-soft),
    background var(--dur-fast) var(--ease-out-soft);
  white-space: nowrap;
  line-height: 1;
}

/* Primary — warm stone gradient (no more green!) */
.btn-primary,
button.btn-primary {
  background: var(--grad-stone);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-primary.lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn-primary.sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }

/* Ghost — cream surface, stone outline */
.btn-ghost,
button.btn-ghost {
  background: rgba(255,255,255,.6);
  color: var(--bn-stone-600);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover,
button.btn-ghost:hover {
  background: var(--bn-sand-100);
  border-color: var(--bn-gold-400);
  color: var(--bn-stone-700);
  transform: translateY(-1px);
}

/* Danger outline */
.btn-danger-outline {
  background: transparent;
  color: var(--bn-danger);
  border: 1px solid #f3c8cc;
}
.btn-danger-outline:hover { background: #fff0f0; }
button.danger {
  background: #fff0f0;
  color: var(--bn-danger);
  border: 1px solid #f3c8cc;
}
button.danger:hover { background: #fbd7da; }

/* ── 4. Auth modal — light surface ────────────────────────────────────── */
.auth-overlay {
  background: rgba(36, 26, 14, .55) !important;
  backdrop-filter: blur(8px) saturate(140%);
}
.auth-modal {
  background: var(--color-surface-raised) !important;
  color: var(--bn-ink) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--color-border);
  padding: var(--space-8) !important;
  max-height: 92vh;
}
.auth-modal h2, .auth-modal h3 { color: var(--bn-ink-strong); }
.auth-close {
  background: var(--bn-sand-100) !important;
  color: var(--bn-stone-600) !important;
  border: none !important;
}
.auth-close:hover { background: var(--bn-sand-200) !important; }
.auth-tabs {
  background: var(--bn-sand-100) !important;
  border-radius: var(--radius-pill);
  padding: 4px;
}
.auth-tab {
  color: var(--bn-stone-600) !important;
  background: transparent !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
}
.auth-tab.active {
  background: #fff !important;
  color: var(--bn-ink-strong) !important;
  box-shadow: var(--shadow-sm);
}
.auth-brand-name {
  color: var(--bn-ink-strong) !important;
  font-weight: 800;
  font-size: var(--text-2xl);
}
.auth-input, input.auth-input {
  background: #fff !important;
  color: var(--bn-ink) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  font-family: inherit;
  font-size: var(--text-base);
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.auth-input:focus {
  outline: none !important;
  border-color: var(--bn-gold-400) !important;
  box-shadow: 0 0 0 3px rgba(201,164,90,.22) !important;
}
.auth-input::placeholder { color: var(--color-text-muted) !important; }
.auth-submit-btn, .auth-submit {
  background: var(--grad-stone) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast), box-shadow var(--dur-base);
}
.auth-submit-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.auth-error {
  background: #fbeaec !important;
  color: var(--bn-danger) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid #f3c8cc;
}

/* ── 5. Hero / landing ─────────────────────────────────────────────────── */
.hero, .hero-cinematic {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201,164,90,.15), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(14,122,63,.08), transparent 55%),
    var(--grad-hero) !important;
  color: var(--bn-ink-strong) !important;
}
.hero h1, .hero-cinematic h1 { color: var(--bn-ink-strong); }
.hero p, .hero-content p {
  color: var(--bn-ink-soft);
  font-size: var(--text-lg);
  max-width: var(--max-w-prose);
}
.hero-bg { display: none !important; }   /* legacy noisy bg removed */

/* ── 6. Section heads ──────────────────────────────────────────────────── */
.section-head h2 { color: var(--bn-ink-strong); }
.section-head p  { color: var(--bn-ink-soft); opacity: 1; }

/* ── 7. Cards — universal warm surface ─────────────────────────────────── */
.step-card,
.project-card,
.usage-card,
.aqar-card,
.contractor-card,
.material-card,
.upsell-feat {
  background: var(--color-surface-raised) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--bn-ink) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft);
}
.step-card:hover,
.project-card:hover,
.aqar-card:hover,
.contractor-card:hover {
  border-color: var(--bn-stone-300) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.step-card h3,
.project-card-title,
.upsell-feat strong { color: var(--bn-ink-strong) !important; }
.step-card p,
.upsell-feat span { color: var(--bn-ink-soft) !important; opacity: 1 !important; }

/* Project-card status pill — refined */
.project-card-status {
  background: var(--bn-sand-100) !important;
  color: var(--bn-stone-600) !important;
  border-radius: var(--radius-pill) !important;
  padding: 2px var(--space-3) !important;
  font-size: var(--text-xs);
  font-weight: 700;
}
.project-card-status.done       { background: #e1f5e9 !important; color: var(--bn-palm-600) !important; }
.project-card-status.designing  { background: #fff3da !important; color: var(--bn-stone-600) !important; }
.project-card-status.draft      { background: var(--bn-sand-100) !important; color: var(--bn-stone-500) !important; }

/* ── 8. Step wizard panes ──────────────────────────────────────────────── */
.step-wrap,
.dj-wrap {
  color: var(--bn-ink);
}
.dj-pane,
.step-wrap > section {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.dj-pane h3 { color: var(--bn-ink-strong); }
.dj-note    { color: var(--bn-ink-soft); font-size: var(--text-sm); }

/* Wizard pills — refine */
.dj-progress { gap: var(--space-2); flex-wrap: wrap; }
.dj-pill {
  background: var(--bn-sand-100);
  color: var(--bn-stone-600);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid var(--color-border);
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.dj-pill.active {
  background: var(--grad-stone) !important;
  color: #fff !important;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.dj-pill.done {
  background: #e1f5e9 !important;
  color: var(--bn-palm-600) !important;
  border-color: #c1e5cf !important;
}

/* Wizard inputs */
.dj-pane input[type="text"],
.dj-pane input[type="number"],
.dj-pane select,
.dj-pane textarea,
.auth-modal input[type="text"],
.auth-modal input[type="number"],
.auth-modal select {
  background: #fff;
  color: var(--bn-ink);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.dj-pane input:focus,
.dj-pane select:focus,
.dj-pane textarea:focus {
  outline: none;
  border-color: var(--bn-gold-400);
  box-shadow: 0 0 0 3px rgba(201,164,90,.22);
}
.dj-pane label { color: var(--bn-stone-600); font-size: var(--text-sm); font-weight: 600; }

/* ── 9. Modals (generic) ──────────────────────────────────────────────── */
.modal-content,
.modal-card,
.projects-modal-inner,
.plan-modal-inner {
  background: var(--color-surface-raised) !important;
  color: var(--bn-ink) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ── 10. AI gallery (hero image area) ─────────────────────────────────── */
.ai-hero {
  border-radius: var(--radius-xl) !important;
  background: var(--bn-stone-800);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ai-disclaimer {
  background: var(--bn-sand-100) !important;
  color: var(--bn-stone-700) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}
.ai-badge {
  background: var(--grad-gold);
  color: var(--bn-ink-strong);
  font-weight: 700;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
}
.ai-thumb {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), transform var(--dur-base);
}
.ai-thumb.active {
  border-color: var(--bn-gold-400);
  box-shadow: var(--shadow-glow-gold);
}
.ai-hero-btn {
  background: rgba(254,252,246,.95) !important;
  color: var(--bn-stone-700) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.ai-hero-btn:hover { background: #fff !important; box-shadow: var(--shadow-sm); }
.ai-hero-btn.accent {
  background: var(--grad-gold) !important;
  color: var(--bn-ink-strong) !important;
  border-color: transparent !important;
}

/* ── 11. Pro panel buttons ────────────────────────────────────────────── */
.pro-btn {
  background: var(--color-surface-raised);
  color: var(--bn-stone-700);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  transition: all var(--dur-fast) var(--ease-out-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pro-btn:hover {
  background: var(--bn-sand-100);
  border-color: var(--bn-gold-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pro-btn small {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-xs);
}
.pro-btn.pro-paid {
  background: linear-gradient(135deg, rgba(201,164,90,.12), rgba(201,164,90,.04));
  border-color: rgba(201,164,90,.45);
}

/* ── 12. Upsell hero / feature grid ───────────────────────────────────── */
.upsell-hero {
  background: var(--color-surface-raised) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  text-align: center;
}
.upsell-hero h3 { color: var(--bn-ink-strong) !important; }
.upsell-hero p  { color: var(--bn-ink-soft) !important; }
.upsell-icon    { font-size: 3rem; margin-bottom: var(--space-3); }

/* ── 13. Code / inline tokens ─────────────────────────────────────────── */
code, kbd {
  background: var(--bn-sand-100);
  color: var(--bn-stone-700);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .9em;
  border: 1px solid var(--color-border);
}

/* ── 14. Inputs not yet covered (catch-all) ───────────────────────────── */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="url"],
select, textarea {
  font-family: inherit;
}

/* ── 15. Theme-diriyah.css — neutralize conflicting tokens ────────────── */
/* (the file existed before, override its variables to match new system) */
.theme-diriyah {
  background: var(--bn-sand-50) !important;
  color: var(--bn-ink) !important;
}

/* ── 16. Pills + chips (legacy) ───────────────────────────────────────── */
.dj-chip {
  background: var(--bn-sand-100) !important;
  border-color: var(--color-border) !important;
  color: var(--bn-stone-600) !important;
}
.dj-chip.ok {
  background: #e1f5e9 !important;
  border-color: #c1e5cf !important;
  color: var(--bn-palm-600) !important;
}
.dj-result {
  background: var(--bn-sand-100) !important;
  border-color: var(--color-border) !important;
}

/* ── 17. Footer / legal text muted by default ─────────────────────────── */
.footer, footer {
  background: var(--bn-stone-800);
  color: var(--bn-sand-200);
}
.footer a { color: var(--bn-gold-300); }

/* ── 18. Selection highlight ──────────────────────────────────────────── */
::selection { background: var(--bn-gold-300); color: var(--bn-ink-strong); }

/* ── 19. Mobile polish ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: var(--text-base); }
  .nav-inner { padding: var(--space-3) var(--space-4); }
  .auth-modal { padding: var(--space-6) !important; border-radius: var(--radius-lg) !important; }
  .dj-pane    { padding: var(--space-4) !important; border-radius: var(--radius-lg) !important; }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
}

/* ── 20. The lockup in nav uses BN's pulse animation ──────────────────── */
.nav .bunyan-mark .bn-node {
  animation: bn-node-pulse 4.2s var(--ease-in-out) infinite;
  transform-origin: 32px 16px;
}

/* ── 21b. HERO BULLETPROOF VISIBILITY ─────────────────────────────────
 * Mobile Safari sometimes ignores keyframe overrides of `opacity: 0 !important`
 * declarations. To never have invisible text on any device, we keep the base
 * state ALWAYS visible. Animation is purely decorative — uses `backwards`
 * fill-mode so the entrance shows the from-state during delay, then settles
 * back to the base (visible) state. If animation never runs → still visible. */
.hero-reveal > * {
  opacity: 1;            /* base = visible everywhere */
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-reveal > * {
    animation: bn-fade-up .9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .hero-reveal > *:nth-child(1) { animation-delay:  50ms; }
  .hero-reveal > *:nth-child(2) { animation-delay: 150ms; }
  .hero-reveal > *:nth-child(3) { animation-delay: 250ms; }
  .hero-reveal > *:nth-child(4) { animation-delay: 350ms; }
  .hero-reveal > *:nth-child(5) { animation-delay: 450ms; }
  .hero-reveal > *:nth-child(6) { animation-delay: 550ms; }
}
@keyframes bn-fade-up {
  from { opacity: 0; transform: translateY(18px); }
}

/* Also: make absolutely sure the h1 inside the hero is the readable dark ink */
.hero h1, .hero h1 * {
  color: var(--bn-ink-strong) !important;
}
.hero h1 .word-bunyan {
  /* keep the gold-foil shimmer effect, but ensure it doesn't get our ink override */
  color: transparent !important;
  background: linear-gradient(135deg, #C9A96E 0%, #F0D080 35%, #F8E5A8 50%, #E5C896 65%, #C9A96E 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
}
.hero h1 .punctuation { color: var(--bn-gold-500) !important; }
.hero-tagline { color: var(--bn-ink-soft) !important; }
.hero-tagline em { color: var(--bn-gold-500) !important; }
.hero-lead { color: var(--bn-ink) !important; opacity: 1 !important; }
.hero-meta, .hero-meta * { color: var(--bn-stone-500) !important; }
.hero-meta strong { color: var(--bn-gold-500) !important; }
.label-rule { color: var(--bn-gold-500) !important; }
.scroll-hint, .scroll-hint * { color: var(--bn-stone-500) !important; }
.stat strong { color: var(--bn-gold-500) !important; }
.stat span { color: var(--bn-stone-600) !important; opacity: 1 !important; }

/* ── 22. Hardcoded light-text leftovers from dark theme (literals) ────── */
/* These rules had `color: #F5F1E8` or `color: rgba(245,241,232, ...)` hardcoded
 * in styles.css and are now sitting on cream/white surfaces → invisible. */
.ai-thumb span                  { color: var(--bn-stone-600) !important; }
.ai-thumb.active span           { color: var(--bn-gold-500) !important; }
.photo-drop-text                { color: var(--bn-stone-500) !important; }
.photo-edit-head p              { color: var(--bn-ink-soft) !important; }
.ref-width                      { color: var(--bn-stone-500) !important; }
.cost-line .line-val            { color: var(--bn-ink) !important; opacity: 1 !important; }
.interior-start-hint            { color: #fff !important; } /* on dark overlay — keep light */
.profile-presets-label,
.dropzone-label,
.section-tab,
.subscription-name              { color: var(--bn-stone-700) !important; }

/* Generic catch-all: any element whose background is white/cream but text
 * inherits one of the legacy light hex values — force readable ink. */
.dtab-panel,
.dtab-panel *:not(button):not(.btn-primary):not(.btn-ghost):not(.ai-hero-btn) {
  /* default to dark text — buttons keep their own colors */
}
.dtab-panel { color: var(--bn-ink); }

/* Form labels and helper text that were `opacity: 0.75` on dark — now they
 * end up too faint on cream. Restore opacity. */
.section-head p,
.step-card p,
.profile-presets-label,
.ai-hero-sub,
.upsell-feat span               { opacity: 1 !important; }

/* Pricing / plan card text — make sure it's dark */
.plan-card,
.plan-card *,
.plan-modal-inner,
.plan-modal-inner *:not(button):not(.bn-pill):not(.bn-btn--accent) {
  color: var(--bn-ink);
}
.plan-card h3, .plan-card h4    { color: var(--bn-ink-strong) !important; }
.plan-price                     { color: var(--bn-ink-strong) !important; }
.plan-period                    { color: var(--bn-stone-500) !important; }

/* Tags that previously had `color: var(--gold)` over dark — on cream they
 * become low-contrast yellow. Switch to a darker, stronger gold. */
.brand-en,
.nav-links a:hover              { color: var(--bn-gold-500) !important; }

/* Any leftover hardcoded `color: #F5F1E8` on element with NO own background
 * (so it inherits the now-cream body). Re-target via attribute selector. */
[style*="color: #F5F1E8"],
[style*="color:#F5F1E8"]        { color: var(--bn-ink) !important; }

/* ── 23. Make sure inputs/textareas show dark text on white ────────────── */
input, textarea, select         { color: var(--bn-ink); }
input::placeholder,
textarea::placeholder           { color: var(--color-text-muted); }

/* ── 24. Footer overrides — keep dark theme, ensure links pop ─────────── */
.footer, .footer * { color: var(--bn-sand-200); }
.footer a, .footer a:hover { color: var(--bn-gold-300); }
.footer h3, .footer h4 { color: var(--bn-sand-50); }

/* ── 25b. User dropdown menu — legacy used dark surface w/ cream text.
 * Re-skin to cream surface with ink text + gold hover. */
.nav-avatar {
  background: var(--grad-stone) !important;
  border-color: var(--bn-gold-400) !important;
  color: #fff !important;
}
.nav-avatar-menu {
  background: var(--color-surface-raised) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) !important;
  min-width: 180px;
}
.nav-avatar-menu button {
  color: var(--bn-stone-700) !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
}
.nav-avatar-menu button:hover {
  background: var(--bn-sand-100) !important;
  color: var(--bn-ink-strong) !important;
}
#nav-signout-btn {
  color: var(--bn-danger) !important;
  border-top: 1px solid var(--color-divider) !important;
  margin-top: 4px;
  padding-top: var(--space-3) !important;
}
#nav-signout-btn:hover { background: #fff0f0 !important; color: var(--bn-danger) !important; }

/* Language toggle button — match the new aesthetic */
.btn-lang {
  background: var(--bn-sand-100) !important;
  color: var(--bn-stone-700) !important;
  border: 1px solid var(--color-border) !important;
  font-weight: 700 !important;
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-soft);
  letter-spacing: .04em;
}
.btn-lang:hover {
  background: var(--bn-sand-200) !important;
  border-color: var(--bn-gold-400) !important;
  color: var(--bn-ink-strong) !important;
}

/* Force-hide the now-deprecated AI Backend dev pill (safety net) */
#backend-status { display: none !important; }

/* ── 25. Body text safety net ─────────────────────────────────────────── */
/* If something inherited body color and the body has color:#F5F1E8 from the
 * legacy reset, force dark. We already override body above but some browsers
 * cache; this is belt-and-braces. */
body, main, section, article, aside { color: var(--bn-ink); }

/* ── 21. Subtle Diriyah-triangle ornament at the top of the page ─────── */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background:
    linear-gradient(90deg, var(--bn-gold-400) 0%, var(--bn-stone-500) 50%, var(--bn-gold-400) 100%);
  z-index: 1000;
  pointer-events: none;
  opacity: .85;
}