/* Yolt v11 — SCORECARD GREEN/RED TONE RULE
 * Locked: 2026-05-10 by Yolt
 * Source: _DESIGN_HANDOFF/_DESIGN_BATCH_4_TONE_FIX.html
 *
 * RULE: every scorecard rendering a $ metric MUST carry data-tone:
 *   data-tone="revenue"  → text var(--good) + border-left 35% mix --good ↔ --line
 *   data-tone="expense"  → text var(--bad)  + border-left 35% mix --bad  ↔ --line
 *   data-tone="neutral"  → default ink, no border (counts, sessions, ratios)
 *
 * SUBTLE: text + border-left only. ZERO background fill, ZERO heavy tinting.
 * QA gate: any $ scorecard без data-tone = fail review.
 *
 * Applies to all 6 scorecard variants:
 *   .scorecard-compound  · .scorecard-strip-card  · .scorecard-spark-card
 *   .scorecard-plan-card · .scorecard-top-card    · .scorecard-vmm
 */

/* ════════ revenue tone — green ══════════════════════════════════════ */
.scorecard-compound[data-tone="revenue"],
.scorecard-strip-card[data-tone="revenue"],
.scorecard-spark-card[data-tone="revenue"],
.scorecard-plan-card[data-tone="revenue"],
.scorecard-top-card[data-tone="revenue"],
.scorecard-vmm[data-tone="revenue"] {
  border-left: 3px solid color-mix(in oklch, var(--good) 35%, var(--line));
}
.scorecard-compound[data-tone="revenue"] .metric-row.total .metric-value,
.scorecard-compound[data-tone="revenue"] .v,
.scorecard-strip-card[data-tone="revenue"] .v,
.scorecard-spark-card[data-tone="revenue"] .v,
.scorecard-plan-card[data-tone="revenue"] .attain .v,
.scorecard-top-card[data-tone="revenue"] .top-cell .v,
.scorecard-vmm[data-tone="revenue"] .v {
  color: var(--good);
}

/* ════════ expense tone — red ════════════════════════════════════════ */
.scorecard-compound[data-tone="expense"],
.scorecard-strip-card[data-tone="expense"],
.scorecard-spark-card[data-tone="expense"],
.scorecard-plan-card[data-tone="expense"],
.scorecard-top-card[data-tone="expense"],
.scorecard-vmm[data-tone="expense"] {
  border-left: 3px solid color-mix(in oklch, var(--bad) 35%, var(--line));
}
.scorecard-compound[data-tone="expense"] .metric-row.total .metric-value,
.scorecard-compound[data-tone="expense"] .v,
.scorecard-strip-card[data-tone="expense"] .v,
.scorecard-spark-card[data-tone="expense"] .v,
.scorecard-plan-card[data-tone="expense"] .attain .v,
.scorecard-top-card[data-tone="expense"] .top-cell .v,
.scorecard-vmm[data-tone="expense"] .v {
  color: var(--bad);
}

/* ════════ back-compat: .scorecard-compound.bad → expense ══════════ */
/* Keep deprecated `.bad` modifier as alias so existing code doesn't break. */
.scorecard-compound.bad {
  border-left: 3px solid color-mix(in oklch, var(--bad) 35%, var(--line));
}
.scorecard-compound.bad .metric-row.total .metric-value {
  color: var(--bad);
}

/* ════════ neutral tone — default (no override needed) ═══════════════ */
/* data-tone="neutral" or omitted → default ink, default border.
   Document explicitly so reviewers know neutral was intentional, not missed. */