/* =============================================================
   Nobiset public theme — DARK MODE
   Activated by html[data-mp-theme="dark"] (same attribute the panels use,
   so one toggle + one stored preference covers the whole site).
   Strategy: override the neutral/surface --bk-* tokens; token-driven
   components adapt automatically. Brand purple is brightened for contrast
   and its soft tints are darkened.
   ============================================================= */
html[data-mp-theme="dark"] {
  color-scheme: dark;

  /* ---- Neutrals ---- */
  --bk-text: #f3f1f9;
  --bk-text-muted: #b0abc2;
  --bk-text-faint: #847f96;
  --bk-bg: #131019;
  --bk-surface: #1c1928;
  --bk-surface-2: #252134;
  --bk-hover: #2a2540;
  --bk-border: #322d44;
  --bk-border-strong: #443e5a;
  --bk-overlay: rgba(0, 0, 0, 0.66);

  /* ---- Ink → brand in dark: every `background:var(--bk-ink); color:#fff`
       CTA stays valid (white on purple) and pops; ink-as-text (logo wordmark,
       outline buttons) becomes on-brand purple. ---- */
  --bk-ink: var(--bk-primary-500);
  --bk-ink-hover: var(--bk-primary-600);
  --bk-on-ink: #ffffff;

  /* ---- Brand: brighter core, darkened soft fills ---- */
  --bk-primary-50:  #1b1635;
  --bk-primary-100: #241d49;
  --bk-primary-200: #2f2660;
  --bk-primary-300: #4636a0;
  --bk-primary-400: #6149d8;
  --bk-primary-500: #7c5cff;   /* core brand (brightened for dark) */
  --bk-primary-600: #6a4cf0;   /* hover */
  --bk-primary: var(--bk-primary-500);
  --bk-primary-hover: var(--bk-primary-600);
  --bk-primary-tint: var(--bk-primary-50);
  --bk-primary-soft: var(--bk-primary-100);
  --bk-info: var(--bk-primary-500);

  /* ---- Semantic tints → translucent for dark surfaces ---- */
  --bk-success-tint: rgba(21, 165, 91, 0.18);
  --bk-error-tint:   rgba(229, 72, 77, 0.18);
  --bk-warning-tint: rgba(245, 165, 36, 0.18);

  /* ---- Gradients ---- */
  --bk-gradient-soft: linear-gradient(135deg, #1b1635 0%, #211a30 100%);

  /* ---- Elevation: deepen for dark backgrounds ---- */
  --bk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --bk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.32);
  --bk-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.34);
  --bk-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.34);

  /* ---- Focus ring ---- */
  --bk-ring: 0 0 0 4px rgba(124, 92, 255, 0.32);
  --bk-ring-strong: 0 0 0 4px rgba(124, 92, 255, 0.4);
}

/* Images that shouldn't blaze white on dark (logos opt-in via data attr handled
   by theme-toggle.js; this softens large media) */
html[data-mp-theme="dark"] .bk-body { background: var(--bk-bg); color: var(--bk-text); }

/* Hero band has a hardcoded light gradient — give it a dark brand-tinted one
   so the heading stays readable in dark mode. */
html[data-mp-theme="dark"] .bk-hero {
  background:
    radial-gradient(90% 110% at 85% -10%, rgba(124, 92, 255, 0.24), transparent 60%),
    radial-gradient(80% 100% at 10% 0%, rgba(180, 96, 210, 0.16), transparent 55%),
    radial-gradient(70% 90% at 50% 110%, rgba(124, 92, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #1b1533 0%, var(--bk-bg) 70%);
}
html[data-mp-theme="dark"] .bk-hero::after {
  background: linear-gradient(to bottom, transparent, var(--bk-bg));
}

/* Inner-page heros (about/services/blog/contact/vendor) had hardcoded LIGHT
   gradients → they stayed white at the top in dark mode. Darken them too. */
html[data-mp-theme="dark"] .bk-content-hero,
html[data-mp-theme="dark"] .bk-vhero {
  background:
    radial-gradient(80% 110% at 82% -10%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(70% 95% at 14% 4%, rgba(180, 96, 210, 0.16), transparent 55%),
    linear-gradient(180deg, #1b1533 0%, var(--bk-bg) 100%) !important;
}
html[data-mp-theme="dark"] .bk-vhero {
  background:
    radial-gradient(80% 110% at 82% -10%, color-mix(in srgb, var(--vp-primary, rgba(124, 92, 255, 0.22)) 100%, transparent), transparent 60%),
    radial-gradient(70% 95% at 14% 4%, color-mix(in srgb, var(--vp-secondary, rgba(180, 96, 210, 0.16)) 100%, transparent), transparent 55%),
    linear-gradient(180deg, #1b1533 0%, var(--bk-bg) 100%) !important;
}
html[data-mp-theme="dark"] .bk-vhero::after {
  background: linear-gradient(to bottom, transparent, var(--bk-bg));
}

/* =============================================================
   Light/Dark toggle button (component: components/mp-theme-toggle)
   Self-contained so the public theme needs no panel CSS.
   ============================================================= */
.mp-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}
.mp-theme-toggle__track {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--bk-radius-pill);
  background: var(--bk-surface-2);
  box-shadow: inset 0 0 0 1px var(--bk-border);
  transition: background var(--bk-dur-fast) var(--bk-ease),
              box-shadow var(--bk-dur-fast) var(--bk-ease);
}
.mp-theme-toggle__thumb {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;       /* RTL-aware: starts at the right edge */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bk-bg);
  display: grid;
  place-items: center;
  box-shadow: var(--bk-shadow-sm);
  transition: transform var(--bk-dur) var(--bk-ease-out);
}
.mp-theme-toggle__icon { font-size: 11px; color: var(--bk-text-muted); }
.mp-theme-toggle__icon--light { color: var(--bk-warning); }
.mp-theme-toggle__icon--dark  { display: none; color: var(--bk-primary); }

/* Dark state: track turns brand, thumb slides to the start (LTR end / RTL left) */
.mp-theme-toggle.is-dark .mp-theme-toggle__track {
  background: var(--bk-primary);
  box-shadow: inset 0 0 0 1px var(--bk-primary);
}
.mp-theme-toggle.is-dark .mp-theme-toggle__thumb { transform: translateX(-20px); }
.mp-theme-toggle.is-dark .mp-theme-toggle__icon--light { display: none; }
.mp-theme-toggle.is-dark .mp-theme-toggle__icon--dark  { display: inline; }
.mp-theme-toggle:focus-visible { outline: none; }
.mp-theme-toggle:focus-visible .mp-theme-toggle__track { box-shadow: var(--bk-ring); }

/* LTR safety (site is RTL, but keep the thumb travel correct if ever LTR) */
html[dir="ltr"] .mp-theme-toggle.is-dark .mp-theme-toggle__thumb { transform: translateX(20px); }