/* ========================================================================== AIM STAGE PALETTE — 7 hues x 2 variants = 14 assignable stage colours -------------------------------------------------------------------------- Load order: AFTER aim-canonical.css. See Pages/Shared/_Layout.cshtml. WHY THIS IS A SEPARATE FILE FROM aim-canonical.css aim-canonical is twenty-four names, one per CONCEPT, and it says outright that anything not on that list is a design conversation rather than a new token. This is that conversation, decided (James, 2026-09-05): workflow stages get their own identity colours so "where is everything" is readable at a glance. Keeping them here means the semantic vocabulary stays at 24 and a stage colour can never be mistaken for a state colour. THE ONE RULE THAT MAKES THIS SAFE — and it is ONLY red (James, 2026-09-05) --bad red means "an issue needs you", and nothing else on these surfaces may look like it. Green and yellow/orange ARE available as stage identities, so long as each is clearly its own colour: --bad #B91C1C red = an issue. NOTHING here may approach it. --ok #15803D green = complete. --stage-lime is deliberately yellow-green (hue 80) and much brighter, so it reads as a different colour, not a shade of it. --warn #B45309 amber = the Data column's gap marker. --stage-amber is a clean yellow (hue 45) and --stage-orange is vivid (hue 25 but far lighter), so neither reads as that dark orange-brown. --idle grey = not started. No grey in the palette at all. An earlier cut excluded green and amber too and was squeezed into the cool half of the wheel — it produced two near-identical pairs (teal/cyan and blue/indigo). Freeing everything except red is what lets these seven sit roughly evenly around the wheel, which is the whole point of the exercise. Hue spread: 220 · 270 · 300 · 175 · 80 · 45 · 25. The one deliberate near- pair is amber/orange, because both were asked for by name. HOW THE 14 ARE USED Seven hues, each with a -deep and a -soft variant. A workflow needs one slot per stage; the platform vocabulary has 11 active stages (dbo.PlatformWorkflowStages), so 14 covers it with three spare. Assignment lives in the DATABASE, not here — PlatformWorkflowStages.ColourToken names one of these tokens, and an estate may override it. This file only says what the colours ARE. EVERY TOKEN IS DEFINED TWICE — once here for light, once in the dark block. A stage colour defined only for light renders as an inherited surprise in dark mode, which is the drift aim-canonical's header warns about. ========================================================================== */ :root { /* ── 1. Blue · hue 220 ───────────────────────────────────────────────── */ --stage-blue-deep: #2563EB; --stage-blue-soft: #93C5FD; /* ── 2. Violet · hue 270 ─────────────────────────────────────────────── */ --stage-violet-deep: #7C3AED; --stage-violet-soft: #C4B5FD; /* ── 3. Magenta · hue 300 ────────────────────────────────────────────── */ --stage-magenta-deep: #C026D3; --stage-magenta-soft: #F0ABFC; /* ── 4. Teal · hue 175 ───────────────────────────────────────────────── */ --stage-teal-deep: #0F766E; --stage-teal-soft: #5EEAD4; /* ── 8. Cyan · hue 190 (added 2026-09-21) ───────────────────────────────── James asked for an alternative to magenta on design capture's section colours ("a mostly male app, having pink annoys people"). All seven hues were in use, so this is an EIGHTH, placed between teal and blue and kept brighter than both so the three stay apart: teal is a dark green-teal, blue a royal blue, this a sky cyan. Magenta stays in the palette for anything that already uses it. */ --stage-cyan-deep: #0891B2; --stage-cyan-soft: #A5F3FC; /* ── 5. Lime · hue 80 ──────────────────────────────────────────────────── The palette's green, and deliberately a YELLOW-green. --ok is #15803D, a dark forest green at hue 145; this sits 65 degrees away and much brighter, so "Vegetation (4/10)" can never be misread as "Complete". */ --stage-lime-deep: #65A30D; --stage-lime-soft: #BEF264; /* ── 6. Amber · hue 45 ─────────────────────────────────────────────────── A clean yellow, not the dark orange-brown of --warn (#B45309). */ --stage-amber-deep: #CA8A04; --stage-amber-soft: #FDE047; /* ── 7. Orange · hue 25 ────────────────────────────────────────────────── Shares --warn's hue but is far lighter and more saturated, so the two read as different colours rather than two states of one. Kept furthest from red of the warm three. */ --stage-orange-deep: #C2410C; --stage-orange-soft: #FDBA74; /* ── Text ON a stage colour ────────────────────────────────────────────── The -soft variants are uniformly pale, so they share one dark ink. The -deep variants do NOT: a yellow and a violet cannot carry the same ink. Measured, not guessed (2026-09-05). With white on every -deep, FOUR of the seven failed WCAG AA for small text — teal 3.74, orange 3.56, lime 3.09, amber 2.94. Two were fixed by darkening the swatch one step (teal → #0F766E, orange → #C2410C, both still unmistakably their hue); the other two cannot be darkened without turning brown and colliding with --warn, so lime and amber take DARK ink instead. That is why this is per-hue rather than one shared token. If you change a -deep value, re-measure. The ratio is against the ink named on the line below it. */ --stage-blue-deep-ink: #FFFFFF; --stage-violet-deep-ink: #FFFFFF; --stage-magenta-deep-ink: #FFFFFF; --stage-teal-deep-ink: #FFFFFF; --stage-cyan-deep-ink: #1A1F2E; --stage-lime-deep-ink: #1A1F2E; --stage-amber-deep-ink: #1A1F2E; --stage-orange-deep-ink: #FFFFFF; --stage-ink-on-soft: #1A1F2E; } /* ========================================================================== DARK — the same seven hues re-voiced for a dark ground. -deep becomes the LUMINOUS variant and -soft the mid-tone: on a dark surface the prominent one has to be the brighter one. Names stay stable so the database mapping never changes. ========================================================================== */ [data-theme="aim-dark"] { --stage-blue-deep: #7DA9FF; --stage-blue-soft: #1E3A8A; --stage-violet-deep: #BD93F9; /* Dracula Purple */ --stage-violet-soft: #4C1D95; --stage-magenta-deep: #FF79C6; /* Dracula Pink */ --stage-magenta-soft: #701A75; --stage-teal-deep: #5EEAD4; --stage-teal-soft: #134E4A; --stage-cyan-deep: #67E8F9; --stage-cyan-soft: #164E63; --stage-lime-deep: #BEF264; --stage-lime-soft: #3F6212; --stage-amber-deep: #FBD34D; --stage-amber-soft: #713F12; --stage-orange-deep: #FDBA74; --stage-orange-soft: #7C2D12; /* Inverted: in dark, -deep is the PALE variant and takes dark ink. -soft is a DARK tint of the same hue and takes light ink. ⚠ The obvious choice — keeping -soft as a mid-tone — was measured and rejected: all seven landed at 2.77–4.47 against light ink, because a mid-tone is the one lightness that suits neither ink. Pushing them to ~900-level darkness makes light ink comfortable while the hues stay separable against the #343746 card. */ --stage-blue-deep-ink: #21222C; --stage-violet-deep-ink: #21222C; --stage-magenta-deep-ink: #21222C; --stage-teal-deep-ink: #21222C; --stage-cyan-deep-ink: #21222C; --stage-lime-deep-ink: #21222C; --stage-amber-deep-ink: #21222C; --stage-orange-deep-ink: #21222C; --stage-ink-on-soft: #F8F8F2; }