/* Dark theme overrides — always loaded after Tailwind (see baseof.html).
   Unlayered rules with html.dark + !important so light-only utilities cannot win. */

/* Light mode only: slate-500 → slate-600 */
html:not(.dark) .text-slate-500:not(.text-white):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-violet"]):not([class*="text-sky"]):not([class*="text-red"]):not([class*="text-blue"]) {
  color: var(--color-slate-600);
}

/* Surfaces */
html.dark :is(.bg-white, .bg-slate-50):not(.osd-hero-cta):not(.osd-on-light):not(:where(.osd-on-light *)) {
  background-color: var(--color-slate-900) !important;
}

html.dark .bg-slate-100:not(.osd-on-light):not(:where(.osd-on-light *)) {
  background-color: var(--color-slate-800) !important;
}

/* Hero CTA — white pill on the dark photo, never remapped */
.osd-hero-cta,
html.dark .osd-hero-cta {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.osd-hero-cta:hover,
html.dark .osd-hero-cta:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Text */
html.dark .text-slate-500:not(.text-white):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-violet"]):not([class*="text-sky"]):not([class*="text-red"]):not([class*="text-blue"]):not(:is(.osd-on-light *)) {
  color: var(--color-slate-400) !important;
}

html.dark .text-slate-600:not(.text-white):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-violet"]):not([class*="text-sky"]):not([class*="text-red"]):not([class*="text-blue"]):not(:is(.osd-on-light *)) {
  color: var(--color-slate-300) !important;
}

html.dark :is(.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700):not(.osd-hero-cta):not(.osd-on-light):not(:is(.osd-on-light *)):not(.text-white):not([class*="text-emerald"]):not([class*="text-amber"]):not([class*="text-violet"]):not([class*="text-sky"]):not([class*="text-red"]):not([class*="text-blue"]) {
  color: var(--color-slate-100) !important;
}

html.dark .text-slate-400:not(.text-white):not(:is(.osd-on-light *)) {
  color: var(--color-slate-400) !important;
}

/* White preview tiles — preserve light surfaces and dark-on-light text */
html.dark .osd-on-light {
  background-color: #ffffff !important;
  border-color: var(--color-slate-200) !important;
}

html.dark .osd-on-light :is(.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700) {
  color: var(--color-slate-900) !important;
}

html.dark .osd-on-light .text-slate-600 {
  color: var(--color-slate-600) !important;
}

html.dark .osd-on-light :is(.text-slate-500, .text-slate-400) {
  color: var(--color-slate-600) !important;
}

html.dark .osd-on-light .osd-muted {
  color: var(--color-slate-600) !important;
}

html.dark .osd-on-light .bg-slate-100 {
  background-color: var(--color-slate-100) !important;
}

html.dark .osd-on-light .osd-brand-dl:not(.osd-brand-dl--on-dark) {
  background-color: #ffffff !important;
  border-color: var(--color-slate-300) !important;
  color: var(--color-slate-700) !important;
}

html.dark .osd-on-light .osd-brand-dl:not(.osd-brand-dl--on-dark):hover {
  background-color: var(--color-slate-100) !important;
  color: var(--color-slate-900) !important;
}

html.dark .osd-dark-panel {
  background-color: var(--color-slate-900) !important;
  border-color: var(--color-slate-700) !important;
  color: var(--color-slate-50);
}

html.dark .osd-dark-panel :is(.text-slate-400, .text-slate-500) {
  color: var(--color-slate-400) !important;
}

html.dark .osd-dark-panel .osd-brand-dl--on-dark {
  background-color: var(--color-slate-600) !important;
  border-color: var(--color-slate-500) !important;
  color: var(--color-slate-50) !important;
}

html.dark .osd-dark-panel .osd-brand-dl--on-dark:hover {
  background-color: var(--color-slate-500) !important;
  border-color: var(--color-slate-400) !important;
}

html.dark :is(.bg-white, .bg-slate-50):not(.osd-hero-cta):not(.osd-on-light) :is(.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700) {
  color: var(--color-slate-100) !important;
}

html.dark :is(.bg-white, .bg-slate-50):not(.osd-hero-cta):not(.osd-on-light) :is(.text-slate-600, .text-slate-500),
html.dark :is(.bg-white, .bg-slate-50):not(.osd-hero-cta):not(.osd-on-light) .text-slate-400 {
  color: var(--color-slate-300) !important;
}

html.dark .hover\:text-slate-950:hover,
html.dark .hover\:text-slate-900:hover,
html.dark .group:hover .group-hover\:text-slate-950,
html.dark .group:hover .group-hover\:text-slate-900 {
  color: var(--color-slate-50);
}

html.dark .group:hover .group-hover\:text-emerald-700 {
  color: var(--color-emerald-400);
}

html.dark .decoration-slate-300 {
  text-decoration-color: var(--color-slate-600);
}

html.dark :is(.hover\:decoration-slate-950, .hover\:decoration-slate-900):hover {
  text-decoration-color: var(--color-slate-100);
}

html.dark :is(.border-slate-100, .border-slate-200, .border-slate-300):not(.osd-on-light):not(:where(.osd-on-light *)):not(:is(.bg-slate-800, .bg-slate-900, .bg-slate-950) *) {
  border-color: var(--color-slate-700) !important;
}

html.dark :where(.divide-slate-200 > :not(:last-child)) {
  border-color: var(--color-slate-700);
}

html.dark .bg-slate-200:not(:is(.bg-slate-800, .bg-slate-900, .bg-slate-950) *) {
  background-color: var(--color-slate-700) !important;
}

html.dark :is(.hover\:bg-slate-50, .hover\:bg-slate-100):hover {
  background-color: var(--color-slate-800) !important;
}

html.dark .focus-visible\:ring-slate-900\/20:focus-visible {
  --tw-ring-color: color-mix(in oklab, var(--color-slate-100) 25%, transparent);
}

html.dark .focus-visible\:ring-offset-slate-50:focus-visible,
html.dark .focus-visible\:ring-offset-white:focus-visible {
  --tw-ring-offset-color: var(--color-slate-950);
}

/* Forms */
html.dark :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  textarea,
  select
):not(.osd-on-light) {
  background-color: var(--color-slate-900) !important;
  border-color: var(--color-slate-600) !important;
  color: var(--color-slate-100) !important;
}

html.dark :is(input, textarea)::placeholder {
  color: var(--color-slate-500);
}

html.dark select option {
  background-color: var(--color-slate-900);
  color: var(--color-slate-100);
}

html.dark form[role="search"].bg-white,
html.dark form.bg-white {
  background-color: var(--color-slate-900) !important;
}

/* Filter chips */
html.dark :is(button.osd-cat, button.osd-filter)[aria-pressed="false"] {
  background-color: var(--color-slate-900) !important;
  border-color: var(--color-slate-600) !important;
  color: var(--color-slate-300) !important;
}

html.dark :is(button.osd-cat, button.osd-filter)[aria-pressed="true"] {
  background-color: var(--color-slate-100) !important;
  border-color: var(--color-slate-100) !important;
  color: var(--color-slate-900) !important;
}

/* Semantic badges */
html.dark .bg-emerald-100 {
  background-color: color-mix(in oklab, var(--color-emerald-500) 22%, var(--color-slate-900)) !important;
}

html.dark .bg-emerald-100.text-emerald-800 {
  color: var(--color-emerald-300) !important;
}

html.dark .bg-violet-100 {
  background-color: color-mix(in oklab, var(--color-violet-500) 22%, var(--color-slate-900)) !important;
}

html.dark .bg-violet-100.text-violet-800 {
  color: var(--color-violet-300) !important;
}

html.dark .bg-amber-100 {
  background-color: color-mix(in oklab, var(--color-amber-500) 20%, var(--color-slate-900)) !important;
}

html.dark .bg-amber-100.text-amber-800 {
  color: var(--color-amber-300) !important;
}

html.dark .bg-blue-100 {
  background-color: color-mix(in oklab, var(--color-blue-500) 22%, var(--color-slate-900)) !important;
}

html.dark .bg-blue-100.text-blue-800 {
  color: var(--color-blue-300) !important;
}

html.dark .bg-slate-100.text-slate-800,
html.dark .bg-slate-100.text-slate-600,
html.dark .bg-slate-100.text-slate-700 {
  color: var(--color-slate-200) !important;
}

html.dark a.bg-slate-100.text-slate-600:hover,
html.dark a.rounded-full.bg-slate-100:hover {
  background-color: var(--color-slate-700) !important;
  color: var(--color-slate-50) !important;
}

/* Alerts & status pills */
html.dark .border-amber-200.bg-amber-50 {
  border-color: color-mix(in oklab, var(--color-amber-500) 35%, var(--color-slate-700));
  background-color: color-mix(in oklab, var(--color-amber-500) 12%, var(--color-slate-900)) !important;
}

html.dark .border-amber-200.bg-amber-50 .text-amber-900 {
  color: var(--color-amber-200);
}

html.dark .bg-emerald-50.text-emerald-700 {
  background-color: color-mix(in oklab, var(--color-emerald-500) 14%, var(--color-slate-900)) !important;
  color: var(--color-emerald-300) !important;
}

html.dark .bg-amber-50.text-amber-700,
html.dark .bg-amber-50.text-amber-800 {
  background-color: color-mix(in oklab, var(--color-amber-500) 14%, var(--color-slate-900)) !important;
  color: var(--color-amber-200) !important;
}

html.dark .bg-slate-100.text-slate-600.capitalize {
  background-color: var(--color-slate-800) !important;
  color: var(--color-slate-200) !important;
}

html.dark .ring-emerald-600\/20 {
  --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 35%, transparent);
}

html.dark .ring-amber-600\/20 {
  --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 35%, transparent);
}

html.dark .ring-slate-500\/20 {
  --tw-ring-color: color-mix(in oklab, var(--color-slate-400) 35%, transparent);
}

html.dark .text-amber-700 {
  color: var(--color-amber-300);
}

html.dark .text-slate-300:not(.text-white):not(.osd-muted):not(:is(.osd-on-light *)) {
  color: var(--color-slate-400);
}

html.dark .prose :where(a) {
  color: var(--color-slate-200);
  text-decoration-color: var(--color-slate-600);
}

html.dark .prose :where(a:hover) {
  color: var(--color-slate-50);
  text-decoration-color: var(--color-slate-300);
}

html.dark .decoration-amber-400 {
  text-decoration-color: var(--color-amber-600);
}

html.dark .hover\:decoration-amber-700:hover {
  text-decoration-color: var(--color-amber-400);
}

html.dark .prose {
  --tw-prose-body: var(--color-slate-300);
  --tw-prose-headings: var(--color-slate-50);
  --tw-prose-lead: var(--color-slate-400);
  --tw-prose-links: var(--color-slate-100);
  --tw-prose-bold: var(--color-slate-50);
  --tw-prose-counters: var(--color-slate-500);
  --tw-prose-bullets: var(--color-slate-600);
  --tw-prose-hr: var(--color-slate-700);
  --tw-prose-quotes: var(--color-slate-200);
  --tw-prose-quote-borders: var(--color-slate-700);
  --tw-prose-captions: var(--color-slate-400);
  --tw-prose-code: var(--color-slate-100);
  --tw-prose-pre-code: var(--color-slate-200);
  --tw-prose-pre-bg: var(--color-slate-900);
  --tw-prose-th-borders: var(--color-slate-700);
  --tw-prose-td-borders: var(--color-slate-800);
}

/* Logo walls */
.osd-logo-wall img {
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.osd-logo-wall a:hover img {
  opacity: 1;
  filter: grayscale(0);
}

html.dark .osd-logo-wall a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: rgb(255 255 255 / 0.94);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

html.dark .osd-logo-wall a:hover {
  background-color: rgb(255 255 255 / 1);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15);
}

html.dark .osd-logo-wall img,
html.dark .osd-logo-wall a:hover img {
  filter: none;
  opacity: 1;
}

html.dark a:has(> .osd-brand-icon) {
  border-radius: 0.5rem;
  background-color: rgb(255 255 255 / 0.08);
  transition: background-color 0.15s ease;
}

html.dark a:hover:has(> .osd-brand-icon) {
  background-color: rgb(255 255 255 / 0.14);
}

html.dark .osd-brand-icon {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

html.dark a:hover .osd-brand-icon {
  opacity: 1;
}

html.dark .osd-oc-backers-wrap {
  display: inline-block;
  max-width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background-color: rgb(255 255 255 / 0.94);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}

html.dark .osd-oc-backers {
  filter: none;
  opacity: 1;
}

/* Form radio cards (job/event forms) */
html.dark label.bg-white:has(:checked) {
  background-color: color-mix(in oklab, var(--color-violet-500) 12%, var(--color-slate-900)) !important;
}

html.dark label.bg-white {
  background-color: var(--color-slate-900) !important;
}

html.dark .bg-sky-50 {
  background-color: color-mix(in oklab, var(--color-sky-500) 12%, var(--color-slate-900)) !important;
}

html.dark .bg-sky-50.text-sky-800 {
  color: var(--color-sky-200) !important;
}

html.dark .osd-apply-link {
  background-color: var(--color-slate-800) !important;
  border-color: var(--color-slate-600) !important;
}

html.dark .osd-apply-link:hover {
  background-color: var(--color-slate-700) !important;
  border-color: var(--color-slate-500) !important;
}

html.dark .osd-apply-link .bg-slate-100 {
  background-color: var(--color-slate-700) !important;
}

html.dark .osd-apply-link .text-slate-600,
html.dark .osd-apply-link .text-slate-900,
html.dark .osd-apply-link .text-slate-500,
html.dark .osd-apply-link .text-slate-400 {
  color: var(--color-slate-100) !important;
}

html.dark .osd-apply-link:hover .bg-slate-100 {
  background-color: var(--color-slate-900) !important;
  color: var(--color-white) !important;
}

/* Brand download chips — explicit contrast on light preview tiles */
html.dark .osd-brand-dl:not(.osd-brand-dl--on-dark) {
  background-color: #ffffff !important;
  border-color: var(--color-slate-400) !important;
  color: var(--color-slate-800) !important;
}

html.dark .osd-brand-dl:not(.osd-brand-dl--on-dark):hover {
  background-color: var(--color-slate-100) !important;
  border-color: var(--color-slate-500) !important;
  color: var(--color-slate-900) !important;
}