/* The 3 lights: the one place for good, needs a look and urgent (Lee,
   2026-11-11: "anything that means good, needs a look, or urgent should
   always follow those color ways").

   Each light has three colors, as tokens in tokens.css:
     --good / --warning / --urgent             words
     --good-fill / --warning-fill / --urgent-fill    the tint under words
     --good-solid / --warning-solid / --urgent-solid a dot, a bar, an edge,
                                                     a line or an icon
   Words take the word color, on white or on the tint. A dot, a bar, an
   edge, a line, an outline or an icon takes the solid color. A fill takes
   the tint. test/lint/three_lights_test.rb holds this: outside this file,
   tokens.css and ramps.css, no stylesheet names a red, lemon or mint step,
   and no dot, bar or edge takes a light's word color.

   This file also holds every scale built on the lights: the score steps,
   the Timeline's heat rows, a flag's severity, the status pills and the
   light icons. Which light a meaning takes is Light (app/models/light.rb). */

/* ---------- A light by name ---------- */
/* Any part can wear data-light="good|warning|urgent" and read the three
   colors, as in the shared style guide. */
[data-light="good"] { --light-words: var(--good); --light-fill: var(--good-fill); --light-solid: var(--good-solid); }
[data-light="warning"] { --light-words: var(--warning); --light-fill: var(--warning-fill); --light-solid: var(--warning-solid); }
[data-light="urgent"] { --light-words: var(--urgent); --light-fill: var(--urgent-fill); --light-solid: var(--urgent-solid); }

/* ---------- The status pill ---------- */
/* Ui::Core::Badge and StatusBadge: the light's words on its tint. */
.status.good { background: var(--good-fill); color: var(--good); }
.status.warning { background: var(--warning-fill); color: var(--warning); }
.status.danger { background: var(--urgent-fill); color: var(--urgent); }

/* ---------- Icons in a light ---------- */
/* An icon is a mark, so it takes the solid color. */
.glyph-red { color: var(--urgent-solid); }
.glyph-amber { color: var(--warning-solid); }
.glyph-green { color: var(--good-solid); }

/* ---------- A flag's severity ---------- */
/* Ui::Insights::SeverityStyle: the severity's class sets the colors, the
   part's class reads them. Each severity is a light (Lee, 2026-11-11:
   "needs a look, going well, and urgent on the flags on today should match
   our 3 lights"): the dot, the edge, the outline and the chart line in the
   light's solid color, the words in its word color on its tint, as the
   style guide's important badge. */
.severity-urgent { --severity: var(--urgent-solid); --severity-words: var(--urgent); --severity-fill: var(--urgent-fill); }
.severity-needs-a-look { --severity: var(--warning-solid); --severity-words: var(--warning); --severity-fill: var(--warning-fill); }
.severity-going-well { --severity: var(--good-solid); --severity-words: var(--good); --severity-fill: var(--good-fill); }
.severity-closed { --severity: var(--edge); --severity-words: var(--grey); --severity-fill: var(--shade); }

/* ---------- The score scale ---------- */
/* Each step's three colors, on the lights: good from mint, 0 in the grays,
   the warning light at -1 and -2, and urgent, darker as it falls, from -3.
   No orange. data-step where a part can set it; the .step-* classes for a
   place that is handed a class name (Colors::SCORE_SCALE and
   SPARKLINE_SCALE, Urgency, Grade, Ui::Readout::TrendColor and
   Ui::Scorecards::AuditCards.band_class). */
[data-step="5"], .step-good5 { --step-text: var(--mint-800); --step-fill: var(--mint-300); --step-bar: var(--mint-700); }
[data-step="4"], .step-good4 { --step-text: var(--mint-700); --step-fill: var(--mint-200); --step-bar: var(--mint-600); }
[data-step="3"], .step-good3 { --step-text: var(--mint-700); --step-fill: var(--mint-200); --step-bar: var(--mint-500); }
[data-step="2"], .step-good2 { --step-text: var(--mint-700); --step-fill: var(--mint-100); --step-bar: var(--mint-400); }
[data-step="1"], .step-good1 { --step-text: var(--mint-700); --step-fill: var(--mint-100); --step-bar: var(--mint-300); }
[data-step="0"], .step-even { --step-text: var(--grey); --step-fill: var(--ledger-100); --step-bar: var(--ledger-300); }
[data-step="-1"], .step-bad1 { --step-text: var(--lemon-800); --step-fill: var(--lemon-100); --step-bar: var(--lemon-400); }
[data-step="-2"], .step-bad2 { --step-text: var(--lemon-800); --step-fill: var(--lemon-100); --step-bar: var(--lemon-400); }
[data-step="-3"], .step-bad3 { --step-text: var(--red-700); --step-fill: var(--red-100); --step-bar: var(--red-400); }
[data-step="-4"], .step-bad4 { --step-text: var(--red-700); --step-fill: var(--red-200); --step-bar: var(--red-500); }
[data-step="-5"], .step-bad5 { --step-text: var(--red-800); --step-fill: var(--red-300); --step-bar: var(--red-700); }

/* ---------- The Timeline's heat rows ---------- */
/* A brand's flags, one row for each severity, in its light's 3 steps for
   1, 2, and 3 or more (as on the style guide's heat rows). */
.timeline-heat-urgent-1 { background: var(--red-200); }
.timeline-heat-urgent-2 { background: var(--red-400); }
.timeline-heat-urgent-3 { background: var(--red-600); }
.timeline-heat-warning-1 { background: var(--lemon-100); }
.timeline-heat-warning-2 { background: var(--lemon-300); }
.timeline-heat-warning-3 { background: var(--lemon-500); }
.timeline-heat-good-1 { background: var(--mint-200); }
.timeline-heat-good-2 { background: var(--mint-400); }
.timeline-heat-good-3 { background: var(--mint-600); }

/* ---------- Other scales on the lights ---------- */
/* The pacing line: the on-track band in the good tint and its 100% line a
   step darker. */
.spark .band { fill: var(--good-fill); }
.spark .mid { stroke: var(--mint-300); stroke-width: 0.75; }
/* A scorecard's priorities: critical urgent, high the warning light, medium
   a lighter step of it, low the line gray. */
.scorecard-item[data-priority="critical"] { border-left-color: var(--urgent-solid); }
.scorecard-item[data-priority="high"] { border-left-color: var(--warning-solid); }
.scorecard-item[data-priority="medium"] { border-left-color: var(--lemon-200); }