/*
 * Dark theme for colours typed into content by editors.
 *
 * The theme's own stylesheets follow the dark theme through the semantic
 * tokens in variables.css, but a post body can carry colours of its own: a
 * Gutenberg palette class, or an inline style="color: #16295b" picked in the
 * classic editor or pasted from Word. That is content, so it cannot be
 * rewritten to tokens, and left alone it prints navy or black text on the
 * dark page and glaring white boxes around it.
 *
 * The colours below are the ones that actually occur in published posts
 * (queried from wp_posts when the dark theme was built). Only colours that
 * belong to the page's paper are mapped: dark text becomes light text, white
 * and pale boxes become dark surfaces. Deliberate colours - a navy box with
 * white text, a green or teal callout - are left as the editor chose them.
 *
 * Everything is scoped to <main id="main">, and matches on the style
 * attribute only; the theme's templates carry no inline colours of this kind,
 * so in practice only editor content is touched. The !important is needed to
 * beat inline styles and WordPress's own `.has-*-color { … !important }`.
 */

/* Gutenberg palette classes. */
html[data-theme="dark"] #main .has-black-color {
  color: var(--color-text-primary) !important;
}

html[data-theme="dark"] #main .has-white-background-color {
  background-color: var(--color-surface-card) !important;
}

html[data-theme="dark"] #main .has-white-background-color.has-white-color {
  color: var(--color-text-primary) !important;
}

html[data-theme="dark"] #main .has-pale-cyan-blue-background-color,
html[data-theme="dark"] #main .has-light-green-cyan-background-color {
  background-color: var(--color-bg-tertiary) !important;
}

/* Amber is bright in either theme; it only needs dark text on top of it. */
html[data-theme="dark"] #main .has-luminous-vivid-amber-background-color {
  color: var(--color-black) !important;
}

html[data-theme="dark"] #main .has-light-gray-border-color {
  border-color: var(--color-border) !important;
}

/*
 * Inline navy text. The substring also occurs inside "background-color:
 * #16295b", and a navy box keeps its own (white) text, so those are excluded.
 */
html[data-theme="dark"] #main [style*="color: #16295b" i]:not([style*="background-color: #16295b" i]),
html[data-theme="dark"] #main [style*="color:#16295b" i]:not([style*="background-color:#16295b" i]),
html[data-theme="dark"] #main [style*="color: var(--color-blue-200"],
html[data-theme="dark"] #main [style*="color:var(--color-blue-200"] {
  color: var(--color-text-heading) !important;
}

/* Inline black and near-black body text. */
html[data-theme="dark"] #main [style*="color: #000" i],
html[data-theme="dark"] #main [style*="color:#000" i],
html[data-theme="dark"] #main [style*="color: #0d0d0d" i],
html[data-theme="dark"] #main [style*="color: #111" i],
html[data-theme="dark"] #main [style*="color: #333" i],
html[data-theme="dark"] #main [style*="color: black" i],
html[data-theme="dark"] #main [style*="color: rgb(0, 0, 0)"] {
  color: var(--color-text-primary) !important;
}

/* Inline grey secondary text. */
html[data-theme="dark"] #main [style*="color: #555" i],
html[data-theme="dark"] #main [style*="color: #777" i],
html[data-theme="dark"] #main [style*="color: #475569" i],
html[data-theme="dark"] #main [style*="color: #64748b" i],
html[data-theme="dark"] #main [style*="color: var(--color-grey-300"] {
  color: var(--color-text-secondary) !important;
}

/* Inline blue link-like text; also catches "#0000ff" after the black rule above. */
html[data-theme="dark"] #main [style*="color: #0000ff" i],
html[data-theme="dark"] #main [style*="color: #0056b3" i],
html[data-theme="dark"] #main [style*="color: #265aa6" i]:not([style*="background-color: #265aa6" i]),
html[data-theme="dark"] #main [style*="color: var(--color-blue-100"] {
  color: var(--color-link) !important;
}

/* Inline white and near-white boxes. */
html[data-theme="dark"] #main [style*="background-color: #fff" i],
html[data-theme="dark"] #main [style*="background: #fff" i],
html[data-theme="dark"] #main [style*="background-color: white" i],
html[data-theme="dark"] #main [style*="background: white" i],
html[data-theme="dark"] #main [style*="background-color: #fdfdfd" i],
html[data-theme="dark"] #main [style*="background-color: #fafafa" i],
html[data-theme="dark"] #main [style*="background-color: #f9f9f9" i],
html[data-theme="dark"] #main [style*="background-color: #f8f9fa" i],
html[data-theme="dark"] #main [style*="background-color: #f8f8f8" i],
html[data-theme="dark"] #main [style*="background-color:#f8f8f8" i],
html[data-theme="dark"] #main [style*="background: #f8f8f8" i],
html[data-theme="dark"] #main [style*="background-color: #f8fafc" i],
html[data-theme="dark"] #main [style*="background: #f8fafc" i],
html[data-theme="dark"] #main [style*="background-color: #f5f5f5" i],
html[data-theme="dark"] #main [style*="background-color: var(--color-grey-010"] {
  background-color: var(--color-surface-card) !important;
}

/* Inline pale tints: Word table headers (blue, grey) and light-blue notes. */
html[data-theme="dark"] #main [style*="background: #d9e2f3" i],
html[data-theme="dark"] #main [style*="background: #d0cece" i],
html[data-theme="dark"] #main [style*="background-color: #e6f7ff" i] {
  background: var(--color-bg-tertiary) !important;
}