/**
 * HB-62 — Sitewide content text contrast (storefront light theme).
 * Overlay only: do not edit index-C7BUmI7G.js / index-BN2ZtJyR.css.
 *
 * Root cause: many BN2 remaps for pale slate/gray text live under
 * `.public-light-scope`, but live HTML uses `html.storefront-root` without
 * that class. Excerpts/meta use text-slate-400/500/600 (#475569) on white —
 * WCAG-passable but visually washed for body reading.
 *
 * Keeps brand teal/cyan/emerald accents. Does not introduce dark panels.
 */

html.storefront-root {
  --giasy-text-ink: #122033;
  --giasy-text-body: #1e293b;
  --giasy-text-secondary: #334155;
  --muted-foreground: 215 28% 22%;
}

/* ---- Rich content bodies (news / tutorial / product / unified) ---- */
html.storefront-root .news-article-content,
html.storefront-root .tutorial-content,
html.storefront-root .unified-content,
html.storefront-root .product-description-content,
html.storefront-root .html-content-light,
html.storefront-root .backlink-processed-body {
  color: var(--giasy-text-ink) !important;
  -webkit-text-fill-color: var(--giasy-text-ink);
}

html.storefront-root .news-article-content :where(h1, h2, h3, h4, h5, h6),
html.storefront-root .tutorial-content :where(h1, h2, h3, h4, h5, h6),
html.storefront-root .unified-content :where(h1, h2, h3, h4, h5, h6),
html.storefront-root .product-description-content :where(h1, h2, h3, h4, h5, h6),
html.storefront-root .html-content-light :where(h1, h2, h3, h4, h5, h6) {
  color: var(--giasy-text-ink) !important;
  -webkit-text-fill-color: var(--giasy-text-ink);
}

html.storefront-root .news-article-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .tutorial-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .unified-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .product-description-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .html-content-light :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .backlink-processed-body :where(p, li, td, th, blockquote) {
  color: var(--giasy-text-body) !important;
  -webkit-text-fill-color: var(--giasy-text-body);
}

/* Inline spans/fonts inside rich content (pasted Word/HTML often sets pale colors) */
html.storefront-root .news-article-content :where(span, font, em, i, div):not(a):not([class*="text-cyan"]):not([class*="text-emerald"]):not([class*="text-sky"]):not([class*="text-teal"]),
html.storefront-root .tutorial-content :where(span, font, em, i, div):not(a):not([class*="text-cyan"]):not([class*="text-emerald"]):not([class*="text-sky"]):not([class*="text-teal"]),
html.storefront-root .unified-content :where(span, font, em, i, div):not(a):not([class*="text-cyan"]):not([class*="text-emerald"]):not([class*="text-sky"]):not([class*="text-teal"]),
html.storefront-root .product-description-content :where(span, font, em, i, div):not(a):not([class*="text-cyan"]):not([class*="text-emerald"]):not([class*="text-sky"]):not([class*="text-teal"]) {
  color: inherit;
}

/* ---- Lead / excerpt / summary paragraphs (muted slate on white) ---- */
html.storefront-root #main-content p.border-l-2,
html.storefront-root #main-content p[class*="text-slate-400"].leading-relaxed,
html.storefront-root #main-content p[class*="text-slate-500"].leading-relaxed,
html.storefront-root #main-content p[class*="text-slate-600"].leading-relaxed,
html.storefront-root #main-content p[class*="text-gray-400"].leading-relaxed,
html.storefront-root #main-content p.text-slate-600,
html.storefront-root #main-content p.text-slate-500,
html.storefront-root #main-content p.text-slate-400,
html.storefront-root #main-content p.text-lg.text-slate-600,
html.storefront-root #main-content p.italic[class*="text-slate"] {
  color: var(--giasy-text-body) !important;
  -webkit-text-fill-color: var(--giasy-text-body);
}

/* ---- Sitewide muted utilities used as readable copy (not chrome-only) ---- */
html.storefront-root #main-content .text-slate-300,
html.storefront-root #main-content .text-slate-400,
html.storefront-root #main-content .text-slate-500,
html.storefront-root #main-content .text-slate-600,
html.storefront-root #main-content .text-gray-300,
html.storefront-root #main-content .text-gray-400,
html.storefront-root #main-content .text-gray-500,
html.storefront-root #main-content .text-gray-600,
html.storefront-root #main-content [class*="text-slate-3"],
html.storefront-root #main-content [class*="text-slate-4"],
html.storefront-root #main-content [class*="text-slate-5"],
html.storefront-root #main-content [class*="text-slate-6"],
html.storefront-root #main-content [class*="text-gray-3"],
html.storefront-root #main-content [class*="text-gray-4"],
html.storefront-root #main-content [class*="text-gray-5"],
html.storefront-root #main-content [class*="text-gray-6"],
html.storefront-root #main-content .text-muted-foreground {
  color: var(--giasy-text-secondary) !important;
  -webkit-text-fill-color: var(--giasy-text-secondary);
}

/* Body-weight / long-form nodes: prefer ink body, not secondary gray */
html.storefront-root #main-content article p,
html.storefront-root #main-content article li,
html.storefront-root #main-content .product-description-content,
html.storefront-root #main-content .product-description-content p,
html.storefront-root #main-content .product-description-content li {
  color: var(--giasy-text-body) !important;
  -webkit-text-fill-color: var(--giasy-text-body);
}

/* Author / bio boxes sitting on pale panels — raise contrast */
html.storefront-root #main-content [class*="rounded"][class*="border"] .text-slate-400,
html.storefront-root #main-content [class*="rounded"][class*="border"] .text-slate-500,
html.storefront-root #main-content [class*="rounded"][class*="border"] .text-sm.text-slate-400,
html.storefront-root #main-content [class*="rounded"][class*="border"] .text-sm.text-slate-500 {
  color: var(--giasy-text-body) !important;
  -webkit-text-fill-color: var(--giasy-text-body);
}

/* ---- Kill pale-on-white from dark-panel remaps that leak onto light surfaces ---- */
html.storefront-root #main-content [class*="bg-slate-9"] :is(.text-slate-200, .text-slate-300, .text-slate-400, .text-gray-300, .text-gray-400, .text-white),
html.storefront-root #main-content [class*="bg-slate-8"] :is(.text-slate-200, .text-slate-300, .text-slate-400, .text-gray-300, .text-gray-400, .text-white),
html.storefront-root #main-content [class*="bg-black"] :is(.text-slate-200, .text-slate-300, .text-slate-400, .text-gray-300, .text-gray-400, .text-white),
html.storefront-root #main-content [class*="bg-slate-900"] :is(.text-slate-200, .text-slate-300, .text-slate-400, .text-gray-300, .text-gray-400),
html.storefront-root #main-content [class*="bg-slate-800"] :is(.text-slate-200, .text-slate-300, .text-slate-400, .text-gray-300, .text-gray-400) {
  color: var(--giasy-text-body) !important;
  -webkit-text-fill-color: var(--giasy-text-body);
}

/*
 * Preserve brand teal / cyan / emerald accents.
 * IMPORTANT: do NOT use [class*="text-cyan-"] — parent nodes often include
 * Tailwind arbitrary variants like [&_a]:text-cyan-700 in className, which
 * would recolor the whole article container.
 */
html.storefront-root #main-content .text-cyan-300,
html.storefront-root #main-content .text-cyan-400,
html.storefront-root #main-content .text-cyan-500,
html.storefront-root #main-content .text-cyan-600,
html.storefront-root #main-content .text-cyan-700,
html.storefront-root #main-content .text-cyan-800,
html.storefront-root #main-content .hover\:text-cyan-300:hover,
html.storefront-root #main-content .hover\:text-cyan-400:hover,
html.storefront-root #main-content a.text-cyan-400,
html.storefront-root #main-content a.text-cyan-500,
html.storefront-root #main-content a.text-cyan-600,
html.storefront-root #main-content a.text-cyan-700 {
  color: #155e75 !important;
  -webkit-text-fill-color: #155e75;
}

html.storefront-root #main-content .text-sky-600,
html.storefront-root #main-content .text-sky-700,
html.storefront-root #main-content .text-sky-800,
html.storefront-root #main-content .text-teal-600,
html.storefront-root #main-content .text-teal-700 {
  color: #0e7490 !important;
  -webkit-text-fill-color: #0e7490;
}

html.storefront-root #main-content .text-emerald-400,
html.storefront-root #main-content .text-emerald-500,
html.storefront-root #main-content .text-emerald-600,
html.storefront-root #main-content .text-emerald-700,
html.storefront-root #main-content a.text-emerald-400,
html.storefront-root #main-content a.text-emerald-600,
html.storefront-root #main-content a.text-emerald-700 {
  color: #047857 !important;
  -webkit-text-fill-color: #047857;
}

/* Re-assert ink on rich content roots AFTER accent rules (beats arbitrary-variant false positives) */
html.storefront-root .news-article-content,
html.storefront-root .tutorial-content,
html.storefront-root .unified-content,
html.storefront-root .product-description-content,
html.storefront-root .html-content-light,
html.storefront-root .backlink-processed-body {
  color: var(--giasy-text-ink) !important;
  -webkit-text-fill-color: var(--giasy-text-ink);
}

html.storefront-root .news-article-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .tutorial-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .unified-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .product-description-content :where(p, li, td, th, blockquote, dd, dt, figcaption),
html.storefront-root .html-content-light :where(p, li, td, th, blockquote, dd, dt, figcaption) {
  color: var(--giasy-text-body) !important;
  -webkit-text-fill-color: var(--giasy-text-body);
}

/* Backlinks stay distinctive blue (existing site convention) */
html.storefront-root a.auto-backlink,
html.storefront-root a.backlink-keyword,
html.storefront-root a.internal-link.backlink-keyword,
html.storefront-root .news-article-content a.auto-backlink,
html.storefront-root .tutorial-content a.auto-backlink,
html.storefront-root .product-description-content a.auto-backlink {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb;
}

/* In-content cyan links from Tailwind child variants */
html.storefront-root .news-article-content a:not(.auto-backlink):not(.backlink-keyword),
html.storefront-root .tutorial-content a:not(.auto-backlink):not(.backlink-keyword),
html.storefront-root .unified-content a:not(.auto-backlink):not(.backlink-keyword),
html.storefront-root .product-description-content a:not(.auto-backlink):not(.backlink-keyword) {
  color: #155e75 !important;
  -webkit-text-fill-color: #155e75;
}

/* Filled teal/cyan buttons keep light labels */
html.storefront-root #main-content .bg-cyan-500.text-white,
html.storefront-root #main-content .bg-cyan-600.text-white,
html.storefront-root #main-content .bg-sky-500.text-white,
html.storefront-root #main-content .bg-sky-600.text-white,
html.storefront-root #main-content .bg-teal-500.text-white,
html.storefront-root #main-content .bg-teal-600.text-white {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* Placeholders may stay slightly softer but still readable */
html.storefront-root #main-content input::placeholder,
html.storefront-root #main-content textarea::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b;
  opacity: 1;
}