/* THE CALENDAR TONES (M-720, shared by two components since M-723a) — what the platform's five semantic
 * calendar tones look like, and how a tone is shaded when a caller is painting a QUANTITY rather than a kind.
 *
 * It is one file because it is one answer. The year calendar paints a day's mark in a tone; the timeline paints
 * a bar in the same tone and shades its load row on the same ramp; the year calendar's legend paints a swatch
 * out of the very same classes rather than out of a copy of their colours (M-716). Declared per component, the
 * first retune would leave two surfaces disagreeing about the colour of a holiday — visibly, side by side, on
 * the same screen.
 *
 * Every value is a design token, so light -> dark is a token switch and a host theme reaches it too (§12).
 * A caller never supplies a colour: it names one of five tones (YearCalendarTone, whose docblock carries the
 * why) and, optionally, a level on the ramp.
 *
 * ── THE TONE ────────────────────────────────────────────────────────────────────────────────────────
 * Resolved ONCE into `--platform-calendar-tone` and painted from there. It used to be five
 * `background-color` declarations, which was right until the ramp arrived: mixing "20% of this thing's colour"
 * for five levels against five tones is 25 rules of the same sentence, and 25 places for one of them to be the
 * wrong token. Named, it is five plus five — whatever the number of consumers. */

.platform-year-calendar__mark[data-tone="accent"],
.platform-timeline__bar[data-tone="accent"] { --platform-calendar-tone: var(--platform-color-accent); }

.platform-year-calendar__mark[data-tone="positive"],
.platform-timeline__bar[data-tone="positive"] { --platform-calendar-tone: var(--platform-color-ok); }

.platform-year-calendar__mark[data-tone="caution"],
.platform-timeline__bar[data-tone="caution"] { --platform-calendar-tone: var(--platform-color-warning); }

.platform-year-calendar__mark[data-tone="critical"],
.platform-timeline__bar[data-tone="critical"] { --platform-calendar-tone: var(--platform-color-error); }

.platform-year-calendar__mark[data-tone="neutral"],
.platform-timeline__bar[data-tone="neutral"] { --platform-calendar-tone: var(--platform-color-viz-2); }


/* ── THE INTENSITY RAMP (M-720) ──────────────────────────────────────────────────────────────────────
 * The QUANTITY axis, orthogonal to the tone: one colour at graded strength, for a caller painting "how much"
 * rather than "what kind" — the absences board's occupancy year (M-721) and the timeline's load row (M-723b).
 * An element with no `data-intensity` matches none of these and stays exactly as flat as it was.
 *
 * The mix is toward the SURFACE rather than toward transparency, so a shade means the same thing on a Saturday
 * as on a Monday — through a translucent fill the day's own state (muted weekend, tinted holiday) would show
 * through and two equally busy days would read as two different amounts. `color-mix` is not universal, so each
 * level states a flat token first: without it a browser keeps a legible fill rather than an unpainted one.
 *
 * The top level is the tone at full strength, which is why the ramp ends where the flat paint does: a heat
 * map's darkest cell and an ordinary mark are the same colour, and only the ones below it are lightened.
 *
 * There is one rule per level of YearCalendarMark::INTENSITY_LEVELS and YearCalendarComponentTest counts them
 * against that constant — a sixth level added in PHP goes red here rather than painting nothing. */

.platform-year-calendar__mark[data-intensity="1"],
.platform-timeline__load[data-intensity="1"] {
    background-color: var(--platform-color-surface-muted);
    background-color: color-mix(in srgb, var(--platform-calendar-tone) 20%, var(--platform-color-surface));
}


.platform-year-calendar__mark[data-intensity="2"],
.platform-timeline__load[data-intensity="2"] {
    background-color: var(--platform-color-surface-muted);
    background-color: color-mix(in srgb, var(--platform-calendar-tone) 40%, var(--platform-color-surface));
}


.platform-year-calendar__mark[data-intensity="3"],
.platform-timeline__load[data-intensity="3"] {
    background-color: var(--platform-color-border);
    background-color: color-mix(in srgb, var(--platform-calendar-tone) 60%, var(--platform-color-surface));
}


.platform-year-calendar__mark[data-intensity="4"],
.platform-timeline__load[data-intensity="4"] {
    background-color: var(--platform-calendar-tone);
    background-color: color-mix(in srgb, var(--platform-calendar-tone) 80%, var(--platform-color-surface));
}


.platform-year-calendar__mark[data-intensity="5"],
.platform-timeline__load[data-intensity="5"] {
    background-color: var(--platform-calendar-tone);
}