:root { /* ============================================ BRAND PALETTE — Brand Guidelines 2026V 3.0 ============================================ */ /* Brand pink — the canonical brand pink (#ff2cd7). Christine's "pink = star/favourite + CTA hover + New Chat hover" rule paints the favourite stars, primary CTA hover state, and home-hero New Chat hover with this one token. Consolidated 1 June 2026 from a duplicate primitive into this single --pink token so the whole platform uses one pink name. */ --pink: #ff2cd7; --yellow: #ffd400; --cyan: #00c3ff; --purple: #7d48ff; --green: #5cea6c; --red: #ff507e; /* CTA pink alias — NOT dead: the admin Programs Schedule builds var(--btn-pink) dynamically for its program-colour dots (id % 6 == 0), so the token name must exist. Aliased to --pink (was a duplicate #ff2cd7 hex) to honour the no-bare-hex rule. */ --btn-pink: var(--pink); /* Brand gradient — pink → yellow sunset blend, tokenised to the brand palette (no bare hexes). Consumed across app.css, free.css, home-search.css, work.css, etc. via --gradient and its angle variants. */ --gradient-stops: var(--pink) 10%, var(--yellow) 120%; --gradient: linear-gradient(135deg, var(--gradient-stops)); --gradient-horizontal: linear-gradient(90deg, var(--gradient-stops)); --gradient-vertical: linear-gradient(180deg, var(--gradient-stops)); --gradient-128: linear-gradient(128deg, var(--gradient-stops)); /* ============================================ CORE NEUTRALS — Brand Guidelines 2026V 3.0 ============================================ */ /* True black — a darker, richer black than the brand `--black` (which is a warm charcoal used for type). Use this for solid black surfaces such as the footer, marketing breaker cards, and high-contrast ad panels where the warm charcoal would read as faded. */ --black: #0f1e41; --navy: #0f1e41; --white: #FFFFFF; --off-white: #FAFCFE; --gray-light: #e2e7ed; --gray-mid: #9da7b8; --gray-dark: #5b687b; --gray-bubble: #f4f7fb; --gray-hover: #f4f7fb; --gray-white: #f4f7fb; /* ── Report / surface design system ────────────────────────── Tokenized cool-gray + tinted-callout palette used by every report (simulation, Pleaassessment, facilitator) and chat surface. Single source of truth — do NOT redeclare these literals in individual templates or component CSS. */ --surface-cool: #F2f2f4; /* tinted callouts (evidence, foundation, panels) */ --surface-cool-strong: #F4F7FB; /* chat bubbles, slightly more saturated */ --ink-2: #0f1e41; /* secondary text */ /* Modal / focus ring rgbas — referenced by the My Work + Programs management modals (Tier 5-A/5-B). Tokenised so brand-token audits don't trip on the inline rgba() literals. */ --scrim-modal: rgba(15, 23, 42, 0.45); /* dark page scrim under open modal */ --ring-pink-soft: rgba(255, 44, 215, 0.15); /* btn-pink focus ring at 15% */ --shadow-modal: rgba(0, 0, 0, 0.18); /* modal drop shadow body */ /* Legacy alias — kept so existing references keep working. Points at the canonical surface token; do not redefine. */ --gray-background: var(--surface-cool); /* ============================================ PERFORMANCE BANDS — 5-tier scoring system ============================================ Used for score pills, evidence callouts, and anyMove the surface that signals a performance band. Each bandFor the pe has three roles: text, border, fill. Excellent 90–100 green Strong 70–89 cyan Solid 50–69 yellow Developing 30–49 pink Emerging 0–29 kicker10 Single source of truth — do NOT redeclare these literals in component or template CSS. Each band = SOLID brand colour (--band-X, used for text + borders) + a SOFT 10% wash (--band-X-soft, used for pill/tint fills). Card backgrounds that were "fill" use var(--white) directly. */ --band-excellent: var(--green); --band-excellent-soft: color-mix(in srgb, var(--green) 10%, transparent); --band-strong: var(--cyan); --band-strong-soft: color-mix(in srgb, var(--cyan) 10%, transparent); --band-solid: var(--yellow); /* Was color-mix(... var(--kicker10) ...) — the solid & emerging soft washes were swapped, so the solid wash rendered violet (kicker10) while emerging rendered yellow, breaking the "soft = 10% of its own base" contract above (e.g. the heat map's mid-range cells came out violet, and sim-v2 / verdict pills had a violet fill under a yellow border). Christine, 2 June 2026. */ --band-solid-soft: color-mix(in srgb, var(--yellow) 10%, transparent); --band-developing: var(--pink); --band-developing-soft: color-mix(in srgb, var(--pink) 10%, transparent); --band-emerging: var(--kicker10); /* Was color-mix(... var(--yellow) ...) — see the solid note above; this wash is now the 10% of its own base (kicker10). Christine, 2 June 2026. */ --band-emerging-soft: color-mix(in srgb, var(--kicker10) 10%, transparent); /* Neutral evidence/quote callout background — matches the chat-bubble surface so report quotes and chat reads share the same tone. */ --callout-bg: var(--surface-cool-strong); /* ============================================ RESPONDENT GROUP IDENTITY — 4 rater groups ============================================ Christine, 2 June 2026: these are RESPONDENT-GROUP identity colours (who gave the feedback), NOT score bands. Performance scoring lives in the separate --band-{excellent,strong,solid,developing,emerging} set. Pulled from the non-grading kicker palette so a respondent colour can never be mistaken for a score. Christine, 2 June 2026: recoloured to step through the kicker ladder SEQUENTIALLY in report order, matching the Individual Respondents dots (kicker10 is skipped as it doubles as a grading band). Each group has three roles: text, border, fill. Manager Lime (kicker02) Peers Cyan (kicker04) Direct reports Blue (kicker06) [token name: subordinates] Self Amber (kicker16) Single source of truth — consumed by the multi- respondent group maps and the assessment radar. Do NOT redeclare these literals in component or template CSS. */ --band-self-text: var(--kicker16); --band-self-border: var(--kicker16); --band-self-fill: var(--white); --band-manager-text: var(--kicker02); --band-manager-border: var(--kicker02); --band-manager-fill: var(--white); --band-peers-text: var(--kicker04); --band-peers-border: var(--kicker04); --band-peers-fill: var(--white); --band-subordinates-text: var(--kicker06); --band-subordinates-border: var(--kicker06); --band-subordinates-fill: var(--white); /* Neutral evidence/quote callout background — matches the chat-bubble surface so report quotes and chat reads share the same tone. */ --callout-bg: var(--surface-cool-strong); /* ============================================ PREVIEW - Source of Truth ============================================ */ --positive: var(--green); --neutral: var(--yellow); --negative: var(--red); --positive-bg: var(--white); --neutral-bg: var(--white); --negative-bg: var(--white); /* 5% tint washes for status-coded panels/pills (verdict, preview, etc.) */ --positive-tint: color-mix(in srgb, var(--green) 5%, transparent); --neutral-tint: color-mix(in srgb, var(--yellow) 5%, transparent); --negative-tint: color-mix(in srgb, var(--red) 5%, transparent); /* ============================================ QUARTERLY BANDS ============================================ */ --monthly: var(--cyan); --yearly: var(--purple); --quarterly: var(--pink); /* ============================================ 10 kickers at top of reports ============================================ */ --kicker01: var(--yellow); --kicker02: #aedf36; --kicker03: #5cea6c; --kicker04: #1df2e8; --kicker05: var(--cyan); --kicker06: #12a3ff; --kicker07: #247dff; --kicker08: #525eff; --kicker09: var(--purple); --kicker10: #a039f5; --kicker11: #c035eb; --kicker12: #df31e1; --kicker13: var(--pink); --kicker14: #ff507e; --kicker15: #ff806c; --kicker16: #ffaa36; /* ============================================ Cover square palette — warm ramp (#ffd400 → #f533ff). Used exclusively by cover_kicker.html squares. All other kicker consumers use --kicker01..16. ============================================ */ --kicker-t01: #ffd400; --kicker-t02: #ffb42f; --kicker-t03: #ff945e; --kicker-t04: #ff738e; --kicker-t05: #ff53bd; --kicker-t06: #ff33ec; --kicker-t07: #fd33f1; --kicker-t08: #fa33f6; --kicker-t09: #f833fa; --kicker-t10: #f533ff; /* The legacy --bullet01..10 palette was removed (Christine, 1 June 2026): every consumer was switched to brand/kicker tokens (matrix legend cycle in charts.css, the success-picture card in components.css, and the sv-card / sv-callout "bullet02" rules in _sim_v2_styles.html → --red). */ /* ============================================ SHADOWS ============================================ */ --shadow-sm: 0 1px 3px rgba(63, 53, 56, 0.08); --shadow-md: 0 4px 12px rgba(63, 53, 56, 0.10); --shadow-md-heavy: 0 4px 12px rgba(63, 53, 56, 0.28); --shadow-lg: 0 8px 24px rgba(63, 53, 56, 0.10); /* Soft two-layer elevation used by the report section cards (.mi-section). Floating card families (stat-callout, stat-card) share it so they read with the same lift as every other section. */ --shadow-section: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-xl: 0 12px 48px rgba(63, 53, 56, 0.12); --shadow-xl-soft: 0 2px 48px rgba(63, 53, 56, 0.06); --shadow-xl-heavy: 0 24px 64px rgba(63, 53, 56, 0.30); --overlay-bg: rgba(63, 53, 56, 0.5); /* ============================================ SEMANTIC COLOUR ALIASES Maps semantic intent to primitive values. White-label partners: override these, not the primitives above. ============================================ */ /* Brand */ --brand-primary: var(--pink); --brand-orange: var(--kicker15); /* leader/highlight accent — used as 1px border on the "lead" item in power-items, etc. */ --brand-coral: var(--red); /* leader/highlight fill base — paired with --brand-coral-tint as the 5% wash behind the lead item */ --brand-coral-tint: rgba(255, 62, 104, 0.05); --color-primary: var(--pink); --insights-primary: var(--cyan); --bg-secondary: #f2f3f4; --bg-subtle: var(--gray-background); --bg-tertiary: var(--gray-background); --bg-muted: #e2e4e8; --bg-hover: var(--gray-background); --bg-hover-dark: var(--navy); --background-secondary: var(--gray-background); /* Status backgrounds */ --bg-success: var(--green); --bg-success-subtle: #ffffff; --bg-warning: var(--red); --bg-warning-subtle: #ffffff; --bg-info-subtle: #ffffff; /* Borders */ --text-primary: var(--navy); --text-brand: var(--pink); --color-text: var(--navy); /* Status text */ /* Status tint washes now live in the PREVIEW Source-of-Truth block above as --positive-tint / --neutral-tint / --negative-tint. */ /* Status border — saturated partner colours for the tint washes; the pair (5% fill + 1px saturated border) is the canonical "banded pill" recipe. */ --success-border: var(--green); --warning-border: var(--yellow); --danger-border: var(--red); /* Status text — readable on white, partner with tint-*/border-* */ --success-text: #2f9e3a; --warning-text: var(--yellow); --danger-text: var(--red); --text-info: #9399a3; --status-success: var(--green); --status-error: var(--red); /* Grey scale (for legacy references) */ --gray-50: var(--off-white); --gray-100: var(--gray-background); --gray-500: #b6bcc6; --gray-600: #9399a3; --gray-700: #596275; --gray-900: var(--navy); /* Legacy colour aliases */ --color-pink: var(--pink); --color-grey-50: var(--gray-background); }