/* STOCKDIVAR_THEME_CONTRAST_V7628_R1 */

/*
 * Categories moved from the v821 page marker to v830, while the explicit
 * theme rules still targeted only v821. Keep both markers supported so an
 * explicit light choice always wins over the device dark preference.
 */
html[data-theme="light"] body:is(
  [data-page="categories-v821"],
  [data-page="categories-v830"]
) {
  --cat-red: #9f1625;
  --cat-red-dark: #7f111a;
  --cat-bg: #f5f7fb;
  --cat-card: #ffffff;
  --cat-panel: #f9fafc;
  --cat-text: #172033;
  --cat-muted: #526074;
  --cat-line: #d9dee8;
  --cat-hover: #fff4f5;
  --cat-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  background:
    radial-gradient(circle at 100% 0, rgba(167, 25, 40, .09), transparent 30%),
    var(--cat-bg) !important;
  color: var(--cat-text) !important;
}

html[data-theme="dark"] body:is(
  [data-page="categories-v821"],
  [data-page="categories-v830"]
) {
  --cat-red: #ff8d98;
  --cat-red-dark: #e05a68;
  --cat-bg: #0b1220;
  --cat-card: #151d2b;
  --cat-panel: #101826;
  --cat-text: #f8fafc;
  --cat-muted: #c0c8d4;
  --cat-line: #303b4d;
  --cat-hover: #202b3c;
  --cat-shadow: 0 14px 36px rgba(0, 0, 0, .28);
  background:
    radial-gradient(circle at 100% 0, rgba(224, 90, 104, .11), transparent 30%),
    var(--cat-bg) !important;
  color: var(--cat-text) !important;
}

html[data-theme="light"] body:is(
  [data-page="categories-v821"],
  [data-page="categories-v830"]
) .categories-header {
  background: rgba(255, 255, 255, .96) !important;
  border-color: var(--cat-line) !important;
  color: var(--cat-text) !important;
}

html[data-theme="dark"] body:is(
  [data-page="categories-v821"],
  [data-page="categories-v830"]
) .categories-header {
  background: rgba(15, 23, 42, .96) !important;
  border-color: var(--cat-line) !important;
  color: var(--cat-text) !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  :is(.categories-brand strong, .categories-close) {
  color: var(--cat-text) !important;
  opacity: 1 !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .categories-brand small {
  color: var(--cat-muted) !important;
  opacity: 1 !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .categories-close {
  background: var(--cat-card) !important;
  border-color: var(--cat-line) !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .categories-intro {
  background: linear-gradient(135deg, var(--cat-card), var(--cat-hover)) !important;
  border-color: var(--cat-line) !important;
  box-shadow: var(--cat-shadow) !important;
  color: var(--cat-text) !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .categories-intro > span {
  background: color-mix(in srgb, var(--cat-red) 11%, var(--cat-card)) !important;
  color: var(--cat-red) !important;
  opacity: 1 !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .categories-intro h1 {
  color: var(--cat-text) !important;
  opacity: 1 !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .categories-intro p {
  color: var(--cat-muted) !important;
  opacity: 1 !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .category-card {
  background: var(--cat-card) !important;
  border-color: var(--cat-line) !important;
  color: var(--cat-text) !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .category-card strong {
  color: var(--cat-text) !important;
  opacity: 1 !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .category-card small {
  color: var(--cat-muted) !important;
  opacity: 1 !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .subcategory-panel-v821 {
  background: var(--cat-panel) !important;
  border-color: var(--cat-line) !important;
}

body:is([data-page="categories-v821"], [data-page="categories-v830"])
  .subcategory-panel-v821 > a {
  background: var(--cat-card) !important;
  color: var(--cat-text) !important;
}

/*
 * API listing cards inherited dark text tokens but retained their original
 * white API surface. Bind the surface and all text roles to the same theme.
 */
html[data-theme="light"] .api-listing-card {
  --api-card: #ffffff;
  --api-border: #e1e5ec;
  --api-muted: #5c6678;
  background: #ffffff !important;
  border-color: #e1e5ec !important;
  color: #172033 !important;
}

html[data-theme="light"] .api-listing-card .api-card-body {
  background: #ffffff !important;
  color: #172033 !important;
}

html[data-theme="light"] .api-listing-card
  :is(.api-card-title, .api-card-price) {
  color: #172033 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .api-listing-card .api-card-meta {
  color: #5c6678 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .api-listing-card,
body.dark-mode .api-listing-card,
html.dark .api-listing-card {
  --api-card: #121a2a;
  --api-border: #2b374b;
  --api-muted: #aeb7c8;
  background: #121a2a !important;
  border-color: #2b374b !important;
  color: #f4f6fb !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2) !important;
}

html[data-theme="dark"] .api-listing-card .api-card-body,
body.dark-mode .api-listing-card .api-card-body,
html.dark .api-listing-card .api-card-body {
  background: #121a2a !important;
  color: #f4f6fb !important;
}

html[data-theme="dark"] .api-listing-card
  :is(.api-card-title, .api-card-price),
body.dark-mode .api-listing-card
  :is(.api-card-title, .api-card-price),
html.dark .api-listing-card
  :is(.api-card-title, .api-card-price) {
  color: #f4f6fb !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .api-listing-card .api-card-meta,
body.dark-mode .api-listing-card .api-card-meta,
html.dark .api-listing-card .api-card-meta {
  color: #aeb7c8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .api-listing-card:hover,
body.dark-mode .api-listing-card:hover,
html.dark .api-listing-card:hover {
  border-color: color-mix(in srgb, #fb7185 38%, #2b374b) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
}

@media (prefers-contrast: more) {
  html[data-theme="light"] .api-listing-card
    :is(.api-card-title, .api-card-price) {
    color: #0b1220 !important;
  }

  html[data-theme="dark"] .api-listing-card
    :is(.api-card-title, .api-card-price) {
    color: #ffffff !important;
  }
}