/* =============================================================================
CIAO design tokens. THE single source of truth for every CIAO surface.
Consumed by, and only by, this file:
- the public site deliverables/site/styles.css ( before it)
- the private workspace deliverables/site/build_workspace.py (inlined at build)
- the review portal review-app/public/index.html ( from assets)
Do not redefine a brand value anywhere else. Three separate token blocks is
how the three surfaces drifted apart in the first place.
Built from the designer's v1.7.0 kit, inks read from the SVGs:
orange #FF5100, ink #231F20, white #FFFFFF, #141213 for dark surfaces.
THE ONE RULE THAT MATTERS
Orange has three jobs and they are not interchangeable:
--brand fills, marks, rules, bars. Always #FF5100, both themes.
This is the brand. If a surface looks rust or coral instead
of orange, something used --brand-text as a fill.
--brand-text orange that must READ as text. #FF5100 on dark (5.71:1),
#A73704 on light, because #FF5100 on white is only 3.27:1.
--on-brand text sitting ON a --brand fill. Always ink #231F20:
ink-on-orange is 4.99:1, white-on-orange is 3.27:1 and fails.
Light is the :root default so a no-JS render is readable. Dark applies via
prefers-color-scheme AND [data-theme="dark"] so a toggle wins either way.
Typeface, settled 2026-09-07: Red Hat Display for display, Red Hat Text for
body. Source of truth is Peter's shipped CIAO proposal of 2026-09-04
(proposal.ciao.training), set entirely in Red Hat Display on the kit's ink
and orange. The kit itself carries no typeface; Peter's work is the nearest
thing to one. Both families are free (OFL) and served by Google Fonts.
========================================================================== */
:root {
/* grounds, lightest to deepest */
--ground: #FFFFFF;
--surface: #F8F6F3;
--surface-2: #EFEBE5;
--line: #E6E3DC;
--line-strong: #CFC9BE;
/* text */
--text: #231F20;
--text-muted: #5C5955;
--text-faint: #67635E;
/* the signature, by job */
--brand: #FF5100;
--brand-text: #A73704;
--on-brand: #231F20;
--brand-hover: #E04700;
--brand-wash: #FFEEE6;
--brand-tint: #FFD9C7;
/* semantic */
--ok: #276B3C; --ok-wash: rgba(39,107,60,0.10); --ok-line: rgba(39,107,60,0.32);
--bad: #B42318; --bad-wash: rgba(180,35,24,0.10); --bad-line: rgba(180,35,24,0.30);
--info: #3C5480; --info-wash: rgba(60,84,128,0.10); --info-line: rgba(60,84,128,0.30);
--warn: #7A5A12; --warn-wash: rgba(122,90,18,0.10); --warn-line: rgba(122,90,18,0.30);
--code: #3A3733;
--shadow: rgba(35,31,32,0.14);
--nav-bg: rgba(255,255,255,0.86);
--font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Red Hat Text", "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
color-scheme: light;
}
/* the kit's signature colourway */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
--ground:#141213; --surface:#1C191A; --surface-2:#231F20;
--line:#332E2F; --line-strong:#4A4344;
--text:#FFFFFF; --text-muted:#B8B0B1; --text-faint:#9C9495;
--brand:#FF5100; --brand-text:#FF5100; --on-brand:#231F20; --brand-hover:#FF6A25;
--brand-wash:rgba(255,81,0,0.10); --brand-tint:rgba(255,81,0,0.24);
--ok:#7FC98C; --ok-wash:rgba(127,201,140,0.12); --ok-line:rgba(127,201,140,0.34);
--bad:#F08A78; --bad-wash:rgba(240,138,120,0.12); --bad-line:rgba(240,138,120,0.34);
--info:#9DB4DC; --info-wash:rgba(157,180,220,0.12); --info-line:rgba(157,180,220,0.34);
--warn:#E8C57A; --warn-wash:rgba(232,197,122,0.12); --warn-line:rgba(232,197,122,0.34);
--code:#E8E4D8; --shadow:rgba(0,0,0,0.55); --nav-bg:rgba(20,18,19,0.86);
color-scheme: dark;
} }
:root[data-theme="dark"] {
--ground:#141213; --surface:#1C191A; --surface-2:#231F20;
--line:#332E2F; --line-strong:#4A4344;
--text:#FFFFFF; --text-muted:#B8B0B1; --text-faint:#9C9495;
--brand:#FF5100; --brand-text:#FF5100; --on-brand:#231F20; --brand-hover:#FF6A25;
--brand-wash:rgba(255,81,0,0.10); --brand-tint:rgba(255,81,0,0.24);
--ok:#7FC98C; --ok-wash:rgba(127,201,140,0.12); --ok-line:rgba(127,201,140,0.34);
--bad:#F08A78; --bad-wash:rgba(240,138,120,0.12); --bad-line:rgba(240,138,120,0.34);
--info:#9DB4DC; --info-wash:rgba(157,180,220,0.12); --info-line:rgba(157,180,220,0.34);
--warn:#E8C57A; --warn-wash:rgba(232,197,122,0.12); --warn-line:rgba(232,197,122,0.34);
--code:#E8E4D8; --shadow:rgba(0,0,0,0.55); --nav-bg:rgba(20,18,19,0.86);
color-scheme: dark;
}
/* ---- aliases -------------------------------------------------------------
The three surfaces grew different names for the same ideas. These keep every
existing rule working while the canonical names above lead. New rules use the
canonical names. */
:root, :root[data-theme="dark"] {
--accent-text:var(--brand-text); --on-accent:var(--on-brand);
--orange:var(--brand); --orange-lift:var(--brand-hover); --orange-deep:var(--brand-text);
--orange-wash:var(--brand-wash); --orange-tint:var(--brand-tint);
--ivory:var(--ground); --paper:var(--surface); --raised:var(--surface-2);
--ink:var(--text); --soft:var(--text-muted); --muted:var(--text-faint);
--inksoft:var(--text-muted); --linestrong:var(--line-strong);
--coral:var(--brand); --coraldeep:var(--brand-text); --deep:var(--brand-text);
--onaccent:var(--on-brand); --clay:var(--brand-hover); --wash:var(--brand-wash); --tint:var(--brand-tint);
--dark:var(--surface-2); --navbg:var(--nav-bg);
--green:var(--ok); --greenbg:var(--ok-wash);
--red:var(--bad); --redbg:var(--bad-wash);
--blue:var(--info); --bluebg:var(--info-wash);
--okbg:var(--ok-wash); --okline:var(--ok-line);
--badbg:var(--bad-wash); --badline:var(--bad-line);
--infobg:var(--info-wash); --infoline:var(--info-line);
--amber:var(--warn); --amberbg:var(--warn-wash); --amberline:var(--warn-line);
--fontdisplay:var(--font-display); --fontbody:var(--font-body);
}