/* ============================================================
   Solrova — Knowledge Center "Cool Bright" recolor
   ------------------------------------------------------------
   COLORS ONLY. No layout/structure/copy change (Kira rule 11).
   Loaded AFTER each article's inline <style> (a <link> placed
   just before </head>), so these rules win by source order.
   This migrates the legacy dark KC article theme to the locked
   Cool Bright light system without editing each file's inline CSS.

   Palette (matches the live light system / BRAND_USAGE):
     ground #F8FAFC · surface #FFFFFF · ink #0F172A
     body/meta #475569 · hairline #E2E8F0 · on-light cyan #0E7FA0
   The nav + the shared footer stay dark navy (the "anchor" band).
   Created 2026-06-19 (Cool Bright KC migration; Maya/Kira).
   ============================================================ */

/* 1 — token flip: every var(--x) usage (body, cards, tables, etc.) goes light */
:root {
  --bg: #F8FAFC !important;
  --card: #FFFFFF !important;
  --accent: #0E7FA0 !important;   /* on-light cyan (AA); #14ABD6 is light-illegal */
  --text: #0F172A !important;     /* navy ink */
  --text2: #475569 !important;    /* slate body + meta (7:1 on ground) */
  --border: #E2E8F0 !important;   /* cool hairline */
  color-scheme: light;            /* stop phone auto-dark from inverting the page */
}

/* 2 — nav: keep it a solid dark navy anchor (white wordmark stays legible;
        the transparent-at-top behaviour assumed a dark page behind it) */
nav, nav#mainNav, nav.nav,
nav.scrolled, nav#mainNav.scrolled, nav.nav.scrolled {
  background: rgba(7, 13, 26, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
nav .nav-link, nav .nav-links a { color: #CBD5E1 !important; }
nav .nav-link:hover, nav .nav-link.active,
nav .nav-links a:hover { color: #14ABD6 !important; }

/* 3 — category badge: white on deep cyan = 4.6:1 (was white on #14ABD6 = 2.68) */
.article-cluster { background: #0E7FA0 !important; color: #FFFFFF !important; }

/* 4 — links that had no color rule (CTA-box body link fell back to UA blue) */
.cta-box p a, .cta-box a:not(.cta-button) {
  color: #0C6B89 !important; text-decoration: underline !important;  /* #0E7FA0 was 4.40:1 (<AA at body size) */
}

/* 5 — hardcoded dark component boxes -> light tints (navy text now legible) */
.highlight-box { background: #ECFBF6 !important; border-left-color: #0E7FA0 !important; color: #0F172A !important; }
.formula-block { background: #F1F5F9 !important; color: #0F766E !important; border-color: #E2E8F0 !important; }
.worked-example { background: linear-gradient(135deg, #EFF6FB 0%, #ECFBF6 100%) !important; border-color: #CFE6F0 !important; }
.worked-example .ex-row { border-bottom-color: #E2E8F0 !important; }
.verdict-box.makes-sense { background: #ECFDF5 !important; border-color: #0E7FA0 !important; }
.verdict-box.may-not { background: #FEF2F2 !important; border-color: #DC2626 !important; }
.verdict-box.makes-sense h3 { color: #0E7FA0 !important; }
.verdict-box.may-not h3 { color: #B91C1C !important; }
.verdict-box.makes-sense ul li::before { color: #0E7FA0 !important; }
.verdict-box.may-not ul li::before { color: #B91C1C !important; }
.verdict-box ul li { border-bottom-color: #E2E8F0 !important; color: #0F172A !important; }
.takeaway-box h3, .takeaway-box ul li { color: #0F172A !important; }
.takeaway-box ul li::before { color: #0E7FA0 !important; }

/* 6 — status text colors that were light (only AA on dark) -> AA on light */
.payback-table td.good { color: #15803D !important; }
.payback-table td.neutral { color: #92610A !important; }
.payback-table td.caution { color: #B91C1C !important; }

/* 7 — hover tint keyed to the light accent */
.comparison-table tr:hover td { background: rgba(14, 127, 160, 0.06) !important; }

/* 8 — "Continue reading" cards: force light, including on dark-OS phones
        (the inline @media prefers-color-scheme:dark only restyled these) */
.kc-related-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
.kc-related-card-title { color: #0F172A !important; }
.kc-related-card-desc { color: #475569 !important; }
@media (prefers-color-scheme: dark) {
  .kc-related-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
  .kc-related-card-title { color: #0F172A !important; }
  .kc-related-card-desc { color: #475569 !important; }
}

/* 9 — 2026-06-24 AA color-contrast fixes (Lighthouse `color-contrast` gate).
        All 5 scanned KC pages failed the strict gate on template elements whose
        colors are set in per-article inline <style>/style="" — `!important` here
        wins over both regardless of source order, so this one sheet fixes all 41
        KC articles. Tokens per BRAND_USAGE; ratios computed on the #F8FAFC ground:
          breadcrumb + inline article links   #0e7fa0  4.40:1  ->  #0C6B89  5.77:1
          related-articles <h3> heading       #94a3b8  2.45:1  ->  #475569  7.24:1
          CTA button (dark ink on flat cyan)  #070d1a/#0e7fa0 4.22:1 -> gradient + white */
.breadcrumb a,
.article-content a { color: #0C6B89 !important; }
aside.kc-related-articles h3 { color: #475569 !important; }
.cta-box a.cta-button, a.cta-button {
  background: linear-gradient(135deg, #14ABD6, #0E7FA0) !important;
  color: #FFFFFF !important;
}