/* Bounty Meridian readable type — both themes.
   Dump + smash left white type on light cards and light cards on a black page.
   Hover titles fell back to #fff (washed blocks).
   ink4: light theme was painting #161616 on dark product tiles. */

html:not(.dark) {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

html:not(.dark) body {
  background: #fff !important;
  color: #161616 !important;
}
html.dark body {
  background: #000 !important;
  color: #f3f3f3 !important;
}

html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) p,
html:not(.dark) li,
html:not(.dark) td,
html:not(.dark) th,
html:not(.dark) label,
html:not(.dark) .text-black,
html:not(.dark) .text-white,
html:not(.dark) .accent-hover-title,
html:not(.dark) .home-hero-subtext {
  color: #161616 !important;
}

html:not(.dark) .text-grey500,
html:not(.dark) .text-grey600,
html:not(.dark) .text-grey-400,
html:not(.dark) .text-grey-500,
html:not(.dark) .text-grey-600,
html:not(.dark) .text-grey400,
html:not(.dark) .home-hero-subtext {
  color: #3d3d3d !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark p,
html.dark li,
html.dark td,
html.dark th,
html.dark label,
html.dark .text-black,
html.dark .text-white,
html.dark .accent-hover-title {
  color: #f3f3f3 !important;
}

html.dark .text-grey500,
html.dark .text-grey300,
html.dark .text-grey600,
html.dark .text-grey-300,
html.dark .text-grey-400,
html.dark .text-grey-500,
html.dark .text-grey400,
html.dark .home-hero-subtext {
  color: #d0d0d0 !important;
}

/* Work / Cases / listing tiles: paper in light, charcoal in dark — never white-on-white. */
html:not(.dark) .accent-hover-card:not(.accent-colour-card) {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
  color: #161616 !important;
}
html:not(.dark) .accent-hover-card:not(.accent-colour-card) :is(h1, h2, h3, h4, p, span, li, .accent-hover-title, .text-white, .text-black) {
  color: #161616 !important;
}
html:not(.dark) .accent-hover-card:not(.accent-colour-card) :is(p, .text-grey500, .text-grey-500, .home-hero-subtext) {
  color: #3d3d3d !important;
}

html.dark .accent-hover-card:not(.accent-colour-card) {
  background: #111 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f3f3f3 !important;
}
html.dark .accent-hover-card:not(.accent-colour-card) :is(h1, h2, h3, h4, p, span, li, .accent-hover-title, .text-white, .text-black) {
  color: #f3f3f3 !important;
}
html.dark .accent-hover-card:not(.accent-colour-card) :is(.text-grey500, .text-grey300, .text-grey-300, .text-grey-400, .home-hero-subtext) {
  color: #d0d0d0 !important;
}

/* Product tiles stay dark with light type in both themes.
   Use * so we beat html:not(.dark) p / .text-black on every tag. */
html:not(.dark) .accent-colour-card,
html.dark .accent-colour-card {
  color: #fff !important;
}
html:not(.dark) .accent-colour-card *,
html.dark .accent-colour-card * {
  color: #fff !important;
}
html:not(.dark) .accent-colour-card :is(.text-grey500, .text-grey300, .text-grey-400, .text-grey-500, .home-hero-subtext),
html.dark .accent-colour-card :is(.text-grey500, .text-grey300, .text-grey-400, .text-grey-500, .home-hero-subtext) {
  color: #d4d4d4 !important;
}

/* Products / Build tiles that are dark via bg-black (no accent-colour-card). */
html:not(.dark) main a.bg-black,
html:not(.dark) main a.bg-black *,
html:not(.dark) main .bg-black.rounded-2xl,
html:not(.dark) main .bg-black.rounded-2xl *,
html:not(.dark) main .bg-black.rounded-xl,
html:not(.dark) main .bg-black.rounded-xl * {
  color: #fff !important;
}

/* Hover title: accent, never #fff on a light card.
   On a dark product tile, accent is still readable. */
html:not(.dark) :is(.group:hover, .group:focus-within) .accent-hover-title {
  color: #5b24de !important;
}
html:not(.dark) .accent-colour-card :is(.group:hover, .group:focus-within) .accent-hover-title,
html:not(.dark) .accent-colour-card.group:hover .accent-hover-title,
html:not(.dark) .accent-colour-card.group:focus-within .accent-hover-title,
html:not(.dark) main a.bg-black:hover .accent-hover-title,
html:not(.dark) main a.bg-black:focus-within .accent-hover-title {
  color: #c4b5fd !important;
}
html.dark :is(.group:hover, .group:focus-within) .accent-hover-title {
  color: #c4b5fd !important;
}

/* Solid dark CTAs keep white type. Do not target body.bg-white / body.bg-black —
   those classes stay on in both themes. */
html:not(.dark) a.bg-black,
html:not(.dark) button.bg-black,
html:not(.dark) a.bg-black :is(p, span, .text-white, .text-black),
html:not(.dark) button.bg-black :is(p, span, .text-white, .text-black) {
  color: #fff !important;
}

html.dark a.bg-white,
html.dark button.bg-white,
html.dark a.bg-white :is(p, span, .text-white, .text-black),
html.dark button.bg-white :is(p, span, .text-white, .text-black) {
  color: #111 !important;
}