/* Option B - Dark navy / electric editorial art direction (WCAG-minded tokens) */
html[data-design-variant='b'] {
  --font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

  --color-brand-navy: #07111f;
  --color-brand-logo: #5b9bff;
  --color-brand-ink: #f2f6fc;
  --color-brand-blue: #5b9bff;
  --color-dark-text: #c5d0e0;

  --color-primary: #5b9bff;
  --color-muted-foreground: #c5d0e0;
  --color-border: rgba(150, 180, 220, 0.28);
  --color-background: #07111f;
  --color-foreground: #f2f6fc;
  --color-card: #0f1c30;
  --color-muted: #121f34;
  --color-accent: rgba(91, 155, 255, 0.16);

  --preview-b-deep: #050b14;
  --preview-b-panel: #0d1a2e;
  --preview-b-panel-strong: #13233a;
  --preview-b-electric: #5b9bff;
  --preview-b-cyan: #7ee0ff;
  --preview-b-glow: rgba(91, 155, 255, 0.32);
  --preview-b-body: #c5d0e0;
  --preview-b-muted: #a8b6c9;
  --preview-b-link: #7ee0ff;
  --preview-b-cta-fg: #06101c;
  --preview-b-cta-band: #0a1628;
}

html[data-design-variant='b'] body {
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(91, 155, 255, 0.14), transparent 55%),
    linear-gradient(180deg, var(--preview-b-deep), #07111f 45%, #091425 100%);
  color: var(--color-foreground);
  letter-spacing: 0.005em;
}

html[data-design-variant='b'] .xl-container {
  max-width: 72rem;
}

html[data-design-variant='b'] ::selection {
  background: rgba(91, 155, 255, 0.4);
  color: #fff;
}

html[data-design-variant='b'] a {
  text-underline-offset: 0.15em;
}

/* ---------- Borders ---------- */
html[data-design-variant='b'] .border-border,
html[data-design-variant='b'] .border-gray-100,
html[data-design-variant='b'] .border-gray-200,
html[data-design-variant='b'] .border-gray-200\/80,
html[data-design-variant='b'] .border-gray-200\/90,
html[data-design-variant='b'] .border-gray-300,
html[data-design-variant='b'] .border-slate-200,
html[data-design-variant='b'] .border-slate-300,
html[data-design-variant='b'] .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html[data-design-variant='b'] .divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border) !important;
}

/* ---------- Solid / translucent light surfaces -> dark panels ---------- */
html[data-design-variant='b'] .bg-white,
html[data-design-variant='b'] .bg-white\/70,
html[data-design-variant='b'] .bg-white\/90,
html[data-design-variant='b'] .bg-white\/95,
html[data-design-variant='b'] .bg-card,
html[data-design-variant='b'] .bg-background,
html[data-design-variant='b'] .bg-slate-50,
html[data-design-variant='b'] .bg-slate-50\/70,
html[data-design-variant='b'] .bg-slate-50\/80,
html[data-design-variant='b'] .bg-slate-50\/90,
html[data-design-variant='b'] .bg-slate-100,
html[data-design-variant='b'] .bg-gray-50,
html[data-design-variant='b'] .bg-gray-50\/80,
html[data-design-variant='b'] .bg-gray-100,
html[data-design-variant='b'] .bg-zinc-50,
html[data-design-variant='b'] .bg-zinc-100,
html[data-design-variant='b'] .bg-muted,
html[data-design-variant='b'] .bg-muted\/30,
html[data-design-variant='b'] .bg-muted\/40,
html[data-design-variant='b'] .bg-muted\/60,
html[data-design-variant='b'] .bg-amber-50,
html[data-design-variant='b'] .bg-amber-50\/70,
html[data-design-variant='b'] .bg-blue-50,
html[data-design-variant='b'] .odd\:bg-white,
html[data-design-variant='b'] .even\:bg-slate-50\/70,
html[data-design-variant='b'] .even\:bg-slate-50,
html[data-design-variant='b'] .even\:bg-gray-50 {
  background-color: var(--color-card) !important;
  background-image: none !important;
  color: var(--color-foreground);
}

/* Zebra rows: paint TR and cells (axe samples transparent TD against body, missing white TR) */
html[data-design-variant='b'] .odd\:bg-white:nth-child(odd),
html[data-design-variant='b'] tr.odd\:bg-white:nth-child(odd),
html[data-design-variant='b'] .odd\:bg-\[\#0d1a2e\]:nth-child(odd),
html[data-design-variant='b'] tbody tr:nth-child(odd),
html[data-design-variant='b'] tbody tr:nth-child(odd) > th,
html[data-design-variant='b'] tbody tr:nth-child(odd) > td {
  background-color: var(--preview-b-panel) !important;
  color: var(--color-foreground) !important;
}

html[data-design-variant='b'] .even\:bg-slate-50\/70:nth-child(even),
html[data-design-variant='b'] .even\:bg-slate-50\/70:nth-child(2n),
html[data-design-variant='b'] tr.even\:bg-slate-50\/70:nth-child(even),
html[data-design-variant='b'] tr.even\:bg-slate-50\/70:nth-child(2n),
html[data-design-variant='b'] .even\:bg-\[\#13233a\]:nth-child(even),
html[data-design-variant='b'] .even\:bg-\[\#13233a\]:nth-child(2n),
html[data-design-variant='b'] tbody tr:nth-child(even),
html[data-design-variant='b'] tbody tr:nth-child(2n),
html[data-design-variant='b'] tbody tr:nth-child(even) > th,
html[data-design-variant='b'] tbody tr:nth-child(even) > td,
html[data-design-variant='b'] tbody tr:nth-child(2n) > th,
html[data-design-variant='b'] tbody tr:nth-child(2n) > td {
  background-color: var(--preview-b-panel-strong) !important;
  color: var(--color-foreground) !important;
}

html[data-design-variant='b'] tbody tr:nth-child(odd) > td,
html[data-design-variant='b'] tbody tr:nth-child(even) > td,
html[data-design-variant='b'] tbody tr:nth-child(2n) > td {
  color: var(--preview-b-body) !important;
}

/*
 * Tailwind v4 gradients set --tw-gradient-from/to vars, then paint via
 * background-image: linear-gradient(var(--tw-gradient-stops)). Remap the
 * STOP TOKENS so light from-/to- classes cannot paint white even if the
 * background-image utility still applies.
 */
html[data-design-variant='b'] .from-slate-50,
html[data-design-variant='b'] .from-slate-50\/90,
html[data-design-variant='b'] .from-muted\/40,
html[data-design-variant='b'] .from-muted\/60,
html[data-design-variant='b'] .from-white,
html[data-design-variant='b'] .from-white\/90,
html[data-design-variant='b'] .from-brand-blue\/10 {
  --tw-gradient-from: var(--preview-b-panel-strong) !important;
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  ) !important;
}

html[data-design-variant='b'] .via-white,
html[data-design-variant='b'] .via-slate-50\/80 {
  --tw-gradient-via: var(--preview-b-panel) !important;
  --tw-gradient-via-stops: var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-via) var(--tw-gradient-via-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops) !important;
}

html[data-design-variant='b'] .to-white {
  --tw-gradient-to: var(--preview-b-deep) !important;
  --tw-gradient-stops: var(
    --tw-gradient-via-stops,
    var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)
  ) !important;
}

html[data-design-variant='b'] .bg-gradient-to-b.from-slate-50,
html[data-design-variant='b'] .bg-gradient-to-b.from-muted\/60,
html[data-design-variant='b'] .bg-gradient-to-b.from-muted\/40,
html[data-design-variant='b'] .bg-gradient-to-b.to-white,
html[data-design-variant='b'] section.bg-gradient-to-b.from-slate-50,
html[data-design-variant='b'] section.bg-gradient-to-b.to-white,
html[data-design-variant='b'] .border-b.bg-gradient-to-b.from-slate-50,
html[data-design-variant='b'] .border-b.from-slate-50 {
  background-color: var(--preview-b-panel) !important;
  background-image: linear-gradient(
    180deg,
    var(--preview-b-panel-strong) 0%,
    var(--preview-b-panel) 55%,
    var(--preview-b-deep) 100%
  ) !important;
  color: var(--color-foreground) !important;
}

/* ---------- Text ---------- */
html[data-design-variant='b'] .text-brand-ink,
html[data-design-variant='b'] .text-foreground,
html[data-design-variant='b'] .text-black,
html[data-design-variant='b'] .text-gray-900,
html[data-design-variant='b'] .text-gray-800,
html[data-design-variant='b'] .text-slate-900,
html[data-design-variant='b'] .text-slate-800 {
  color: var(--color-foreground) !important;
}

html[data-design-variant='b'] .text-brand-navy {
  color: var(--preview-b-cyan) !important;
}

html[data-design-variant='b'] .text-dark-text,
html[data-design-variant='b'] .text-muted-foreground,
html[data-design-variant='b'] .text-gray-500,
html[data-design-variant='b'] .text-gray-600,
html[data-design-variant='b'] .text-gray-700,
html[data-design-variant='b'] .text-slate-500,
html[data-design-variant='b'] .text-slate-600,
html[data-design-variant='b'] .text-slate-700,
html[data-design-variant='b'] .text-zinc-400,
html[data-design-variant='b'] .text-zinc-500,
html[data-design-variant='b'] .text-zinc-600 {
  color: var(--preview-b-body) !important;
}

html[data-design-variant='b'] .text-primary,
html[data-design-variant='b'] .text-brand-blue,
html[data-design-variant='b'] .text-blue-600,
html[data-design-variant='b'] .text-blue-700,
html[data-design-variant='b'] .text-blue-800,
html[data-design-variant='b'] .text-sky-600,
html[data-design-variant='b'] .text-sky-700,
html[data-design-variant='b'] .text-indigo-600,
html[data-design-variant='b'] .text-indigo-700 {
  color: var(--preview-b-link) !important;
}

/* Light-theme accent greens/reds/ambers used in prose callouts */
html[data-design-variant='b'] .text-green-600,
html[data-design-variant='b'] .text-green-700,
html[data-design-variant='b'] .text-emerald-600,
html[data-design-variant='b'] .text-emerald-700 {
  color: #86efac !important;
}

html[data-design-variant='b'] .text-red-600,
html[data-design-variant='b'] .text-red-700,
html[data-design-variant='b'] .text-rose-600,
html[data-design-variant='b'] .text-rose-700 {
  color: #fca5a5 !important;
}

html[data-design-variant='b'] .text-amber-600,
html[data-design-variant='b'] .text-amber-700,
html[data-design-variant='b'] .text-yellow-600,
html[data-design-variant='b'] .text-yellow-700,
html[data-design-variant='b'] .text-orange-600,
html[data-design-variant='b'] .text-orange-700 {
  color: #fde68a !important;
}

/* Low-opacity white labels fail AA on dark panels */
html[data-design-variant='b'] .text-white\/40,
html[data-design-variant='b'] .text-white\/50 {
  color: var(--preview-b-muted) !important;
}

html[data-design-variant='b'] .text-white\/60,
html[data-design-variant='b'] .text-white\/70 {
  color: var(--preview-b-body) !important;
}

/* ---------- Buttons / CTA fills ---------- */
/* Keep solid CTAs dark enough for white/light text, not electric blue */
html[data-design-variant='b'] .bg-brand-navy,
html[data-design-variant='b'] .bg-brand-ink {
  background-color: var(--preview-b-cta-band) !important;
  color: #f2f6fc !important;
  border-color: rgba(126, 224, 255, 0.35);
}

html[data-design-variant='b'] .bg-brand-navy .text-white,
html[data-design-variant='b'] .bg-brand-navy .text-zinc-200,
html[data-design-variant='b'] .bg-brand-ink .text-white,
html[data-design-variant='b'] .bg-brand-ink .text-zinc-200,
html[data-design-variant='b'] .bg-brand-navy a,
html[data-design-variant='b'] section.bg-brand-navy,
html[data-design-variant='b'] section.bg-brand-navy p,
html[data-design-variant='b'] section.bg-brand-navy h2 {
  color: #f2f6fc !important;
}

html[data-design-variant='b'] .bg-brand-navy a.border-white\/40,
html[data-design-variant='b'] .bg-brand-navy a.border-white\/50 {
  color: #f2f6fc !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* Primary light CTAs inside dark bands must stay light-on-dark for contrast */
html[data-design-variant='b'] .bg-brand-navy .bg-white,
html[data-design-variant='b'] .bg-brand-ink .bg-white,
html[data-design-variant='b'] section.bg-brand-navy a.bg-white {
  background-color: #f2f6fc !important;
  color: #06101c !important;
}

html[data-design-variant='b'] .bg-brand-navy .bg-white.text-brand-navy,
html[data-design-variant='b'] section.bg-brand-navy a.bg-white.text-brand-navy {
  color: #06101c !important;
}

html[data-design-variant='b'] a.bg-brand-navy,
html[data-design-variant='b'] button.bg-brand-navy,
html[data-design-variant='b'] .inline-flex.bg-brand-navy {
  background-color: var(--preview-b-electric) !important;
  color: var(--preview-b-cta-fg) !important;
}

/* Electric fills need dark text for AA (white on #5b9bff fails) */
html[data-design-variant='b'] .bg-brand-blue,
html[data-design-variant='b'] .bg-brand-logo,
html[data-design-variant='b'] a.bg-brand-blue,
html[data-design-variant='b'] a.bg-brand-logo,
html[data-design-variant='b'] button.bg-brand-blue,
html[data-design-variant='b'] .bg-brand-blue.text-white,
html[data-design-variant='b'] .bg-brand-logo.text-white,
html[data-design-variant='b'] .hover\:bg-brand-logo:hover {
  background-color: var(--preview-b-electric) !important;
  color: var(--preview-b-cta-fg) !important;
}

html[data-design-variant='b'] .bg-brand-blue .text-white,
html[data-design-variant='b'] .bg-brand-logo .text-white,
html[data-design-variant='b'] a.bg-brand-blue.text-white,
html[data-design-variant='b'] a.bg-brand-logo.text-white,
html[data-design-variant='b'] .inline-flex.bg-brand-blue,
html[data-design-variant='b'] .inline-flex.bg-brand-logo {
  color: var(--preview-b-cta-fg) !important;
}

html[data-design-variant='b'] .border-brand-navy,
html[data-design-variant='b'] .border-brand-ink,
html[data-design-variant='b'] .border-2.border-brand-navy {
  border-color: rgba(126, 224, 255, 0.55) !important;
}

html[data-design-variant='b'] .hover\:bg-brand-navy\/10:hover,
html[data-design-variant='b'] .hover\:bg-gray-100:hover,
html[data-design-variant='b'] .hover\:bg-blue-50:hover,
html[data-design-variant='b'] .hover\:bg-slate-50:hover,
html[data-design-variant='b'] .hover\:bg-accent:hover {
  background-color: rgba(91, 155, 255, 0.12) !important;
}

html[data-design-variant='b'] .shadow-sm,
html[data-design-variant='b'] .shadow-md,
html[data-design-variant='b'] .shadow-xl {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

/* ---------- Tables (compare grids and any content tables) ---------- */
html[data-design-variant='b'] table {
  color: var(--color-foreground);
  background-color: transparent;
}

html[data-design-variant='b'] table thead,
html[data-design-variant='b'] thead.bg-muted\/60,
html[data-design-variant='b'] .bg-muted\/60 {
  background-color: var(--preview-b-panel-strong) !important;
}

html[data-design-variant='b'] table th,
html[data-design-variant='b'] table td {
  color: var(--color-foreground) !important;
  border-color: var(--color-border) !important;
  background-color: transparent;
}

html[data-design-variant='b'] table td.text-muted-foreground,
html[data-design-variant='b'] table .text-muted-foreground {
  color: var(--preview-b-body) !important;
}

html[data-design-variant='b'] .rounded-2xl.border,
html[data-design-variant='b'] .rounded-xl.border {
  background-color: var(--preview-b-panel);
  border-color: var(--color-border);
}

/* ---------- Prose / markdown / legal ---------- */
html[data-design-variant='b'] .prose,
html[data-design-variant='b'] .prose-slate {
  --tw-prose-body: var(--preview-b-body);
  --tw-prose-headings: var(--color-foreground);
  --tw-prose-lead: var(--preview-b-body);
  --tw-prose-links: var(--preview-b-link);
  --tw-prose-bold: var(--color-foreground);
  --tw-prose-counters: var(--preview-b-muted);
  --tw-prose-bullets: var(--preview-b-muted);
  --tw-prose-hr: var(--color-border);
  --tw-prose-quotes: var(--preview-b-body);
  --tw-prose-quote-borders: var(--preview-b-electric);
  --tw-prose-captions: var(--preview-b-muted);
  --tw-prose-code: var(--preview-b-cyan);
  --tw-prose-pre-code: var(--color-foreground);
  --tw-prose-pre-bg: var(--preview-b-panel-strong);
  --tw-prose-th-borders: var(--color-border);
  --tw-prose-td-borders: var(--color-border);
  color: var(--preview-b-body) !important;
}

html[data-design-variant='b'] .prose h1,
html[data-design-variant='b'] .prose h2,
html[data-design-variant='b'] .prose h3,
html[data-design-variant='b'] .prose h4,
html[data-design-variant='b'] .prose strong {
  color: var(--color-foreground) !important;
}

html[data-design-variant='b'] .prose a {
  color: var(--preview-b-link) !important;
}

html[data-design-variant='b'] .prose code,
html[data-design-variant='b'] code {
  color: var(--preview-b-cyan) !important;
  background-color: rgba(91, 155, 255, 0.12);
}

html[data-design-variant='b'] .prose pre,
html[data-design-variant='b'] pre {
  background-color: var(--preview-b-panel-strong) !important;
  color: var(--color-foreground) !important;
  border: 1px solid var(--color-border);
}

html[data-design-variant='b'] .prose th,
html[data-design-variant='b'] .prose td {
  color: var(--color-foreground) !important;
  border-color: var(--color-border) !important;
}

html[data-design-variant='b'] .prose blockquote {
  color: var(--preview-b-body) !important;
  border-left-color: var(--preview-b-electric) !important;
}

/* Breadcrumbs / chips / callouts */
html[data-design-variant='b'] .rounded-full.border,
html[data-design-variant='b'] .inline-flex.rounded-full {
  border-color: var(--color-border);
  color: var(--preview-b-body);
}

html[data-design-variant='b'] .bg-accent {
  background-color: var(--color-accent) !important;
  color: var(--color-foreground) !important;
}

/* Status chips / badges that stay light in source templates */
html[data-design-variant='b'] .bg-green-100,
html[data-design-variant='b'] .bg-emerald-100,
html[data-design-variant='b'] .bg-lime-100 {
  background-color: rgba(34, 197, 94, 0.18) !important;
}

html[data-design-variant='b'] .text-green-800,
html[data-design-variant='b'] .text-green-700,
html[data-design-variant='b'] .text-emerald-800 {
  color: #86efac !important;
}

html[data-design-variant='b'] .bg-red-100,
html[data-design-variant='b'] .bg-rose-100 {
  background-color: rgba(248, 113, 113, 0.18) !important;
}

html[data-design-variant='b'] .text-red-800,
html[data-design-variant='b'] .text-rose-800 {
  color: #fca5a5 !important;
}

html[data-design-variant='b'] .bg-yellow-100,
html[data-design-variant='b'] .bg-amber-100 {
  background-color: rgba(250, 204, 21, 0.16) !important;
}

html[data-design-variant='b'] .text-yellow-800,
html[data-design-variant='b'] .text-amber-800 {
  color: #fde68a !important;
}

html[data-design-variant='b'] .bg-blue-100,
html[data-design-variant='b'] .bg-sky-100,
html[data-design-variant='b'] .bg-indigo-100 {
  background-color: rgba(91, 155, 255, 0.18) !important;
}

html[data-design-variant='b'] .text-blue-800,
html[data-design-variant='b'] .text-sky-800,
html[data-design-variant='b'] .text-indigo-800 {
  color: #93c5fd !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-design-variant='b'] .preview-reveal {
    animation: preview-b-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html[data-design-variant='b'] .preview-reveal-media {
    animation: preview-b-fade 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html[data-design-variant='b'] .preview-reveal-delay {
    animation-delay: 140ms;
  }
  html[data-design-variant='b'] .preview-reveal-delay-2 {
    animation-delay: 260ms;
  }
  html[data-design-variant='b'] .preview-glow-pulse {
    animation: preview-b-glow 4.5s ease-in-out infinite;
  }
}

@keyframes preview-b-rise {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes preview-b-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes preview-b-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(91, 155, 255, 0);
  }
  50% {
    box-shadow: 0 0 36px 0 var(--preview-b-glow);
  }
}