/* vtx-theme-contrast-20261114-v1.css
 * Follow html[data-theme] for article text color.
 *
 * Cause: a contentHead typography block sets
 *   @media (prefers-color-scheme: dark) { #article-container { color: #f3f4f6 !important; } }
 * without checking the blog theme. On Apple devices with system Dark Mode
 * on, and the blog still in light mode (white background), body text becomes
 * nearly white and unreadable. The top-right theme toggle is fine when the
 * OS is in light mode, because that media query then sets dark text.
 *
 * These selectors are more specific than the unscoped media queries, so
 * article color follows the theme the page is actually showing. The OS
 * preference still matters only when the theme itself has not set
 * data-theme (the theme script then follows the OS).
 */

html[data-theme="light"] #article-container,
html[data-theme="light"] #article-container .vtx-lang-content {
  color: #333333 !important;
}

html[data-theme="light"] #article-container h1,
html[data-theme="light"] #article-container h2,
html[data-theme="light"] #article-container h3,
html[data-theme="light"] #article-container h4,
html[data-theme="light"] #article-container h5 {
  color: #1a1a1a !important;
}

html[data-theme="dark"] #article-container,
html[data-theme="dark"] #article-container .vtx-lang-content {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] #article-container h1,
html[data-theme="dark"] #article-container h2,
html[data-theme="dark"] #article-container h3,
html[data-theme="dark"] #article-container h4,
html[data-theme="dark"] #article-container h5 {
  color: #f9fafb !important;
}

/* Image annotations were hardcoded to #555 in vtx-page-i18n-20261104-v2.css,
 * which is unreadable on the theme's dark background. Follow data-theme. */
html[data-theme="light"] #article-container .vtx-img-text,
html[data-theme="light"] .vtx-img-text {
  color: #555555;
}

html[data-theme="dark"] #article-container .vtx-img-text,
html[data-theme="dark"] .vtx-img-text {
  color: #a1a2b8;
}