/*
 * AVRO V24.2 — semantic intelligence layer
 *
 * The light system controls surfaces and typography. This final layer owns
 * analytical meaning so a general light-theme rule can never turn a bullish,
 * bearish, warning, target or validation value back into neutral black.
 */

:root {
  --avro-up: #087d5a;
  --avro-up-deep: #056346;
  --avro-up-soft: #edf8f3;
  --avro-down: #c43e4d;
  --avro-down-deep: #9f2e3b;
  --avro-down-soft: #fff1f3;
  --avro-watch: #a45e00;
  --avro-watch-deep: #7d4800;
  --avro-watch-soft: #fff7e8;
  --avro-info: #0b7189;
  --avro-info-deep: #07576b;
  --avro-info-soft: #edf8fb;
  --avro-purple: #7044a3;
  --avro-purple-deep: #57327f;
  --avro-purple-soft: #f7f1fc;
  --avro-pink: #ad315f;
  --avro-pink-deep: #872348;
  --avro-pink-soft: #fff0f5;
  --avro-flat: #525a62;
  --avro-flat-soft: #f2f1ed;
}

/* Direct semantic values. WebKit text-fill is explicit because the global
   heading treatment uses it for crisp light-mode typography. */
html body :is(.green, .good, .positive, .pos, .gain, .profit, .bullish, .relative-up, .scenario-green, .pair-usd-good, .dd-positive, .avro-semantic-up),
html body :is(h1, h2, h3, h4, h5, h6):is(.green, .good, .positive, .pos, .gain, .profit, .bullish, .relative-up, .scenario-green, .avro-semantic-up) {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
}

html body :is(.red, .bad, .negative, .neg, .loss, .bearish, .relative-down, .scenario-red, .pair-usd-bad, .dd-loss, .avro-semantic-down),
html body :is(h1, h2, h3, h4, h5, h6):is(.red, .bad, .negative, .neg, .loss, .bearish, .relative-down, .scenario-red, .avro-semantic-down) {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

html body :is(.orange, .yellow, .amber, .warn, .warning, .watch, .caution, .scenario-amber, .avro-semantic-watch),
html body :is(h1, h2, h3, h4, h5, h6):is(.orange, .yellow, .amber, .warn, .warning, .watch, .caution, .avro-semantic-watch) {
  color: var(--avro-watch) !important;
  -webkit-text-fill-color: var(--avro-watch) !important;
}

html body :is(.cyan, .info, .scenario-cyan, .avro-semantic-info),
html body :is(h1, h2, h3, h4, h5, h6):is(.cyan, .info, .scenario-cyan, .avro-semantic-info) {
  color: var(--avro-info) !important;
  -webkit-text-fill-color: var(--avro-info) !important;
}

html body :is(.purple, .violet, .invalidation, .scenario-purple, .avro-semantic-purple),
html body :is(h1, h2, h3, h4, h5, h6):is(.purple, .violet, .invalidation, .scenario-purple, .avro-semantic-purple) {
  color: var(--avro-purple) !important;
  -webkit-text-fill-color: var(--avro-purple) !important;
}

html body :is(.pink, .magenta, .avro-semantic-pink),
html body :is(h1, h2, h3, h4, h5, h6):is(.pink, .magenta, .avro-semantic-pink) {
  color: var(--avro-pink) !important;
  -webkit-text-fill-color: var(--avro-pink) !important;
}

html body :is(.neutral, .flat, .scenario-neutral, .pair-usd-neutral, .avro-semantic-flat) {
  color: var(--avro-flat) !important;
  -webkit-text-fill-color: var(--avro-flat) !important;
}

/* Higher-specificity legacy selectors previously changed `color` while the
   semantic layer changed only WebKit fill. Keep both rendering paths equal. */
html body :is(strong, b, span, td, div).avro-semantic-up,
html body :is(.pill.green, .tag.green, .btn.green) {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
}

html body :is(strong, b, span, td, div).avro-semantic-down,
html body :is(.pill.red, .tag.red, .btn.red) {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

html body :is(.pill.amber, .pill.orange, .tag.amber, .tag.orange, .btn.amber) {
  color: var(--avro-watch) !important;
  -webkit-text-fill-color: var(--avro-watch) !important;
}

html body .explain.bad {
  color: var(--avro-down-deep) !important;
  -webkit-text-fill-color: var(--avro-down-deep) !important;
}

html body .explain.warn {
  color: var(--avro-watch-deep) !important;
  -webkit-text-fill-color: var(--avro-watch-deep) !important;
}

/* Calculator and KPI containers: retain neutral labels while the decisive
   number carries the semantic color. */
html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).good :is(strong, .value, .num, .score),
html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).positive :is(strong, .value, .num, .score),
html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).up :is(strong, .value, .num, .score) {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
}

html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).bad :is(strong, .value, .num, .score),
html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).negative :is(strong, .value, .num, .score),
html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).down :is(strong, .value, .num, .score) {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).warn :is(strong, .value, .num, .score),
html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).warning :is(strong, .value, .num, .score) {
  color: var(--avro-watch) !important;
  -webkit-text-fill-color: var(--avro-watch) !important;
}

html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).good {
  border-color: rgba(8, 125, 90, .29) !important;
  background: var(--avro-up-soft) !important;
}

html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).bad {
  border-color: rgba(196, 62, 77, .28) !important;
  background: var(--avro-down-soft) !important;
}

html body :is(.metric, .kpi, .stat, .result-card, .report-card, .moneybox).warn {
  border-color: rgba(164, 94, 0, .28) !important;
  background: var(--avro-watch-soft) !important;
}

html body :is(.explain, .alert-box, .decision, .status).good,
html body :is(.explain, .alert-box, .decision, .status).success {
  border-color: rgba(8, 125, 90, .30) !important;
  color: var(--avro-up-deep) !important;
  -webkit-text-fill-color: var(--avro-up-deep) !important;
  background: var(--avro-up-soft) !important;
}

html body :is(.explain, .alert-box, .decision, .status).bad,
html body :is(.explain, .alert-box, .decision, .status).error {
  border-color: rgba(196, 62, 77, .30) !important;
  color: var(--avro-down-deep) !important;
  -webkit-text-fill-color: var(--avro-down-deep) !important;
  background: var(--avro-down-soft) !important;
}

html body :is(.explain, .alert-box, .decision, .status).warn {
  border-color: rgba(164, 94, 0, .30) !important;
  color: var(--avro-watch-deep) !important;
  -webkit-text-fill-color: var(--avro-watch-deep) !important;
  background: var(--avro-watch-soft) !important;
}

/* Badges and compact status pills. */
html body :is(.badge, .pill, .tag, .mini-status, .roadmapValidationPill).good,
html body :is(.badge, .pill, .tag).ready,
html body .badgeGood {
  border-color: rgba(8, 125, 90, .32) !important;
  color: var(--avro-up-deep) !important;
  -webkit-text-fill-color: var(--avro-up-deep) !important;
  background: var(--avro-up-soft) !important;
}

html body :is(.badge, .pill, .tag, .mini-status).bad,
html body :is(.badge, .pill, .tag).blocked,
html body :is(.badge, .pill).risk {
  border-color: rgba(196, 62, 77, .30) !important;
  color: var(--avro-down-deep) !important;
  -webkit-text-fill-color: var(--avro-down-deep) !important;
  background: var(--avro-down-soft) !important;
}

html body :is(.badge, .pill, .tag, .mini-status).warn,
html body :is(.badge, .pill, .tag).watch {
  border-color: rgba(164, 94, 0, .30) !important;
  color: var(--avro-watch-deep) !important;
  -webkit-text-fill-color: var(--avro-watch-deep) !important;
  background: var(--avro-watch-soft) !important;
}

html body .badgeWarn {
  border-color: rgba(173, 49, 95, .29) !important;
  color: var(--avro-pink-deep) !important;
  -webkit-text-fill-color: var(--avro-pink-deep) !important;
  background: var(--avro-pink-soft) !important;
}

/* Historical Projection and target intelligence. */
html body :is(.smartTargetCard, .signalBox, .oppMiniBox, .oppSmallCard, .mini, .metric, .proMetricRow, .oppMetricRow)
  :is(.green, .red, .orange, .yellow, .cyan, .purple, .pink, .avro-semantic-up, .avro-semantic-down) {
  opacity: 1 !important;
}

html body .marketContextTable :is(td, span).mcUp,
html body :is(td, span, strong).mcUp {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
  font-weight: 900 !important;
}

html body .marketContextTable :is(td, span).mcDown,
html body :is(td, span, strong).mcDown {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
  font-weight: 900 !important;
}

html body .marketContextTable :is(td, span).mcMixed,
html body :is(td, span, strong).mcMixed {
  color: var(--avro-watch) !important;
  -webkit-text-fill-color: var(--avro-watch) !important;
  font-weight: 900 !important;
}

html body .roadmapRegimeScore.bull strong,
html body .roadmapValidationMiniStats .ok strong {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
}

html body .roadmapRegimeScore.bear strong,
html body .roadmapValidationMiniStats .bad strong {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

html body .roadmapRegimeScore.bull .bar i { background: var(--avro-up) !important; }
html body .roadmapRegimeScore.bear .bar i { background: var(--avro-down) !important; }

/* Directional table cells must win over the unified neutral table rule. */
html body table :is(th, td):is(.green, .good, .positive, .pos, .up, .gain, .relative-up, .mcUp, .avro-semantic-up) {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
  font-weight: 850 !important;
}

html body table :is(th, td):is(.red, .bad, .negative, .neg, .down, .loss, .relative-down, .mcDown, .dd-loss, .avro-semantic-down) {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
  font-weight: 850 !important;
}

html body table :is(th, td):is(.orange, .yellow, .amber, .warn, .warning, .mcMixed, .avro-semantic-watch) {
  color: var(--avro-watch) !important;
  -webkit-text-fill-color: var(--avro-watch) !important;
  font-weight: 850 !important;
}

html body table :is(th, td):is(.cyan, .info, .avro-semantic-info) {
  color: var(--avro-info) !important;
  -webkit-text-fill-color: var(--avro-info) !important;
  font-weight: 850 !important;
}

html body table :is(th, td):is(.purple, .violet, .invalidation, .avro-semantic-purple) {
  color: var(--avro-purple) !important;
  -webkit-text-fill-color: var(--avro-purple) !important;
  font-weight: 850 !important;
}

/* Specific engines that attach meaning to a parent rather than the number. */
html body .ta-board.bullish :is(h3, .ta-score),
html body .bull-run-layer :is(.target-value, .price, .value),
html body .scenario-regime.bull-case :is(strong, .value) {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
}

html body .ta-board.bearish :is(h3, .ta-score),
html body .bottom-risk-layer :is(.target-value, .price, .value),
html body .scenario-regime.bear-case :is(strong, .value) {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

html body :is(.up, .down, .dd-loss, .relative-up, .relative-down, .mcUp, .mcDown, .avro-semantic-up, .avro-semantic-down) {
  opacity: 1 !important;
}

/* Keep directional bars immediately legible in every light tool. */
html body :is(.bar-fill, .progress-fill, .score-fill, .pair-usd-bar-fill).good,
html body :is(.bar-fill, .progress-fill, .score-fill, .pair-usd-bar-fill).up {
  background: var(--avro-up) !important;
}

html body :is(.bar-fill, .progress-fill, .score-fill, .pair-usd-bar-fill).bad,
html body :is(.bar-fill, .progress-fill, .score-fill, .pair-usd-bar-fill).down {
  background: var(--avro-down) !important;
}

/* Shared legacy engine conventions. */
html body :is(.okbox, .miniTag.ok, .coverageDebug .ok) {
  border-color: rgba(8, 125, 90, .30) !important;
  color: var(--avro-up-deep) !important;
  -webkit-text-fill-color: var(--avro-up-deep) !important;
  background: var(--avro-up-soft) !important;
}

html body :is(.warnbox, .miniTag.warn, .coverageDebug .warn, .notice) {
  border-color: rgba(164, 94, 0, .30) !important;
  color: var(--avro-watch-deep) !important;
  -webkit-text-fill-color: var(--avro-watch-deep) !important;
  background: var(--avro-watch-soft) !important;
}

html body :is(.errorbox, .miniTag.bad, .coverageDebug .fail) {
  border-color: rgba(196, 62, 77, .30) !important;
  color: var(--avro-down-deep) !important;
  -webkit-text-fill-color: var(--avro-down-deep) !important;
  background: var(--avro-down-soft) !important;
}

html body table td.bottom {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
  font-weight: 900 !important;
}

html body table td.drawdown {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
  font-weight: 900 !important;
}

html body :is(.badge.b0, .b0) { color: var(--avro-up-deep) !important; -webkit-text-fill-color: var(--avro-up-deep) !important; background: var(--avro-up-soft) !important; }
html body :is(.badge.b1, .b1) { color: var(--avro-info-deep) !important; -webkit-text-fill-color: var(--avro-info-deep) !important; background: var(--avro-info-soft) !important; }
html body :is(.badge.b2, .b2) { color: var(--avro-watch-deep) !important; -webkit-text-fill-color: var(--avro-watch-deep) !important; background: var(--avro-watch-soft) !important; }
html body :is(.badge.b3, .b3) { color: var(--avro-down-deep) !important; -webkit-text-fill-color: var(--avro-down-deep) !important; background: var(--avro-down-soft) !important; }

/* Technical-analysis targets inherit the scenario direction; invalidation is
   always red. This changes presentation only, never chart or target math. */
html body .ta-board.good + .ta-levels .ta-level:not(.invalid) strong {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
}

html body .ta-board.bad + .ta-levels .ta-level:not(.invalid) strong,
html body .ta-level.invalid strong {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

/* Historical Projection has a richer vocabulary than the rest of the suite.
   Reassert every original meaning after the neutral light-theme typography. */
html[data-avro-page="historical-projection"] body :is(.localCacheStatus strong, .anchorTypeBadge.top, .coverageDebug .ok, .comparisonResearchBox .researchLine, .gaugeAssetLine .target strong, .gaugeScore strong, .gaugeStatus, .gaugeScenarioCell .scenarioValue, .avroCycleTopCard strong, .oppKpi .scoreNum, .oppPanel h4, .oppGaugeCenter strong, .oppGaugeCenter b, .oppMiniBox strong, .oppStatusBox b, .oppTargetCard strong, .oppTargetCard small, .oppStrip div, .oppSmallCard strong, .oppFinalTakeaway b, .proSummaryCard strong, .proBestBadge, .proScoreBox strong, .proMiniMetric strong, .proTakeaway h4, .proMatters h4) {
  color: var(--avro-up) !important;
  -webkit-text-fill-color: var(--avro-up) !important;
}

html[data-avro-page="historical-projection"] body :is(.anchorTypeBadge.bottom, .coverageDebug .fail, .oppDownside .oppTargetCard strong, .oppDownside .oppTargetCard small, .oppInvalidationLine, .roadmapTimeBox.risk .roadmapMove) {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

html[data-avro-page="historical-projection"] body :is(.anchorLibraryStatus strong, .anchorTypeBadge.neutral, .coverageDebug .warn, .gaugeAssetLine .pair strong, .oppReportBrand, .oppReportPairLine b, .oppBottomBox h4, .roadmapTimeBox.weak .roadmapMove) {
  color: var(--avro-watch) !important;
  -webkit-text-fill-color: var(--avro-watch) !important;
}

html[data-avro-page="historical-projection"] body :is(.leaderCard strong, .bigNum, .gaugeAssetLine .base strong, .scoreLine strong, .roadmapModelCard.nearModel .roadmapModelScore strong, .oppReportPairLine .base b) {
  color: var(--avro-info) !important;
  -webkit-text-fill-color: var(--avro-info) !important;
}

html[data-avro-page="historical-projection"] body .oppPanel h4.cyan,
html[data-avro-page="historical-projection"] body .proSummaryCard.cyan strong {
  color: var(--avro-info) !important;
  -webkit-text-fill-color: var(--avro-info) !important;
}

html[data-avro-page="historical-projection"] body .oppPanel h4.red,
html[data-avro-page="historical-projection"] body .proSummaryCard.red strong {
  color: var(--avro-down) !important;
  -webkit-text-fill-color: var(--avro-down) !important;
}

html[data-avro-page="historical-projection"] body .oppPanel h4.orange,
html[data-avro-page="historical-projection"] body .proSummaryCard.orange strong {
  color: var(--avro-watch) !important;
  -webkit-text-fill-color: var(--avro-watch) !important;
}

html[data-avro-page="historical-projection"] body [style*="color:var(--purple)"],
html[data-avro-page="historical-projection"] body [style*="color: var(--purple)"] {
  color: var(--avro-purple) !important;
  -webkit-text-fill-color: var(--avro-purple) !important;
}

html[data-avro-page="historical-projection"] body [style*="color:var(--cyan)"],
html[data-avro-page="historical-projection"] body [style*="color: var(--cyan)"] {
  color: var(--avro-info) !important;
  -webkit-text-fill-color: var(--avro-info) !important;
}

/* Home rendering budget: below-fold sections do not need to be painted before
   they approach the viewport. Layout size is preserved to prevent jumps. */
html[data-avro-page="home"] .home-main > :is(.home-section, .technical-analysis-entry, .drawdown-entry, .strength-radar, .microcap-radar, .features, .explanation, .use-cases, .disclaimer):not(.ccp-hero-clean) {
  content-visibility: auto;
  contain-intrinsic-size: auto 780px;
}

@media (max-width: 720px) {
  html[data-avro-page="home"] .home-main > :is(.home-section, .technical-analysis-entry, .drawdown-entry, .strength-radar, .microcap-radar, .features, .explanation, .use-cases, .disclaimer):not(.ccp-hero-clean) {
    contain-intrinsic-size: auto 980px;
  }
}

@media (forced-colors: active) {
  html body :is(.green, .good, .positive, .up, .avro-semantic-up) { color: LinkText !important; }
  html body :is(.red, .bad, .negative, .down, .avro-semantic-down) { color: Mark !important; }
}