/* ============================================================
ROOT LIFE — product palette
------------------------------------------------------------
Layered ON TOP of the Root Life Ecosystem design system. The
DS ships the brand-neutral ecosystem scopes (.brand-root /
.brand-praxis / .brand-ai); this file carries the values the
Root Life *product* pages were tuned to, which sit warmer and
lighter than the DS defaults.
Link AFTER the DS token sheets and styles.css:
Pages on a dark ground add class="rl-ink" alongside brand-root.
Every value here was previously duplicated inline in 27 page
files. Change a colour HERE, not in a page.
============================================================ */
:root,
.brand-root {
/* ---- leaf geometry ------------------------------------------------
The site's organic vocabulary already existed and was outnumbered: 106
asymmetric "leaf" radii against ~2,000 plain rounded corners, every one
hand-written. The shape was a flourish; it should be the grammar.
Each pair is two Fibonacci steps apart, which is why they read as leaves
and seeds rather than as lozenges — the same ratio the golden angle uses
in the Sonic Harvest spiral and the member phyllotaxis.
PANELS AND CARDS take a leaf. Buttons stay pills and inputs stay soft
rectangles: a control should look like a control, and a leaf-shaped
submit button reads as decoration rather than an invitation.
-alt mirrors the axis. Alternate it down a column so a stack of cards
grows like a stem rather than repeating like a table. */
--leaf-xs: 13px 5px 13px 5px;
--leaf-sm: 21px 8px 21px 8px;
--leaf-md: 34px 13px 34px 13px;
--leaf-lg: 55px 21px 55px 21px;
--leaf-xl: 89px 34px 89px 34px;
--leaf-xs-alt: 5px 13px 5px 13px;
--leaf-sm-alt: 8px 21px 8px 21px;
--leaf-md-alt: 13px 34px 13px 34px;
--leaf-lg-alt: 21px 55px 21px 55px;
--leaf-xl-alt: 34px 89px 34px 89px;
/* ---- warm elevation ------------------------------------------------
Cards currently separate from the ground with a 1px border, which reads
as a table cell. These lift instead, and the shadow is GREEN-BLACK rather
than neutral grey so it behaves like shade under a leaf rather than a
drop-shadow on paper. Cheap enough to sit on every card.
Use INSTEAD of a border on a card, not in addition — a lifted surface
that also has a hairline reads as both, which is neither. */
--elev-rest: 0 1px 2px rgba(16,27,11,0.04), 0 8px 24px rgba(16,27,11,0.045);
--elev-raise: 0 2px 4px rgba(16,27,11,0.05), 0 18px 44px rgba(16,27,11,0.07);
--elev-press: 0 1px 2px rgba(16,27,11,0.06);
/* ---- breathing ------------------------------------------------------
Health-conscious reads as air. The section rhythm stops at 89px, which is
generous for a card and tight for a page turn; 144 is the next Fibonacci
step and gives a section room to be one idea. */
--rhythm-tight: 34px;
--rhythm-snug: 55px; /* phone sections: 44px was off-scale and slightly airless */
--rhythm-section: 89px;
--rhythm-open: 144px;
/* ---- type ---- */
--font-display: var(--font-newsreader);
--rl-header-h: 91px;
/* ---- ground & surfaces (light) ---- */
--bg-page: #F8F4EB;
--bg-page-ink: #0D1F14; /* ground for .rl-ink pages; see the scope below */
--bg-sunken: #EFE7D8;
--bg-sunken-warm: #E7DFCE;
--bg-sunken-pale: #F3EDDE;
--surface-card: #FFFDF7;
/* ---- ground & surfaces (dark ladder, shallow -> deep) ---- */
--accent-ground: #1D3B2A; /* THE dark green ground. Carries cream (9.5:1) and gold (5.71:1).
Any background that was #1D3B2A belongs here — never --accent,
which is a lighter olive that fails with gold at 3.70:1. */
--surface-inverse: #1B2E13;
--surface-inverse-soft: #243B18;
--surface-deepest: #101B0B;
--surface-abyss: #0A1912;
--surface-abyss-raised: #0E241A;
--accent-stripe: #16301F;
/* ---- text on light ---- */
--text-strong: #23301A;
--text-body: #22301F;
--text-body-soft: #3A4A3C;
--text-muted: #5C6A5E;
--text-muted-warm: #6E6652;
--text-inverse: #F8F4EB;
/* ---- borders ---- */
--border-subtle: #E2D9C4;
--border-strong: #C6BBA0;
--border-strong-warm: #D6C9B4;
--border-on-dark: #3D5A2C;
--border-on-dark-strong: #2E4F38;
--border-on-dark-soft: #4E6B54;
--border-abyss: #1C3A29;
--border-leaf-on-dark: #4A6B32;
/* The dim rung below it: the app's most-used dark border (~30 sites), which lived as the
literal #3A5626 in the app's C table until 2026-08-09. Added at that exact value, so
this is a name for a shipped colour, not a new one. Two sites use it as a GROUND under
text (compare-table column header, disabled submit) — check ds-token-proof.html before
darkening it, because a border value doubling as a ground has a text floor. */
--border-leaf-on-dark-dim: #3A5626;
/* ---- critical / required (dark surfaces) ----
Required-field marks and form error alerts. Same three roles the AI palette
names; these are the warm-red versions tuned for Root Life's dark panels.
RATIOS CORRECTED 2026-08-09, all three measured rather than carried over:
--critical on --surface-inverse is 7.21:1 (this comment said 6.31:1);
--critical-text on --critical-bg is 10.82:1 (said 9.04:1). Do not use
--critical as ink on a light ground — 1.64:1 on --bg-sunken, 1.84:1 on
--bg-page, 1.98:1 on --surface-card. This comment said 2.98:1, which reads
as a near-miss for a 3:1 floor when the real figure is nowhere near one, so
the wrong number undersold its own warning. Light-ground errors take
--clay-deep: 5.12:1 on --bg-page. */
--critical: #E8A79A;
--critical-bg: #3A2028;
--critical-text: #F3D6D0;
/* ---- green ----
--accent is green as INK on a light ground: headings, links, outlined
buttons, and solid buttons carrying cream text. It is tuned for 4.5:1
against cream, which makes it too LIGHT to be a dark ground — gold and
sage foregrounds fall to ~3.8:1 and ~4.0:1 on it.
Dark panels and sections use --surface-inverse.
--accent-ground is Crop Biography's slightly bluer ladder step, kept so
that page's three-level dark stack stays distinguishable. */
--accent: #405828;
--accent-hover: #2E4A1E;
/* ---- gold (accent, never wallpaper) ---- */
--highlight: #E3A91B;
--highlight-hover: #F2BB35;
--highlight-deep: #D99A26;
--highlight-pale: #E8C87E;
--gold-ink: #7A5A12;
/* ---- teal / links ----
--link must clear AA on all three light grounds. The old #34756E passed
on --bg-page and --surface-card but fell to 4.37:1 on the warmer
--bg-sunken; this value clears the worst of the three at 5.07:1. */
--link: #2F6A64;
--link-hover: #2E4A1E;
--link-light: #3E867E;
--teal: #2E6B57;
--teal-deep: #24544E;
--teal-soft: #D9E8E6;
--teal-on-dark: #6FB6A6;
--teal-border: #234A3A;
/* ---- clay & plum ----
--clay is 3.83:1 on cream, so it is a FILL / large-text colour only.
Small text (eyebrows, labels, meta) uses --clay-deep at 5.11:1. */
--clay: #C06A45;
--clay-deep: #A0522D;
--clay-light: #E8A87E;
--clay-soft: #F4E5D9; /* pale clay chip ground; pairs with --clay-deep ink. #F3E3D7 was
4.49:1 with that ink — under AA by a hundredth. This clears 4.56:1. */
--clay-ink: #7A3A1E; /* small clay text on a PHOTO-TINTED light ground, where
--clay-deep only reaches 3.69:1; this clears 5.64:1 */
--indigo: #2E275B; /* Flow Map category colour. The six flow families need six
distinguishable hues and the palette had no violet step; 11.6:1 on cream. */
--plum: #8B3D5A;
--plum-soft: #EDE0E4;
--plum-light: #C98BA4;
--plum-on-dark: #DBA2B8; /* plum as INK on a dark ground. --plum-light is the on-light pale step
and falls to 4.25:1 on Mobile Preview's rgba(217,139,166,0.14) chip over
the dark panel; this clears that composited ground (#363B28) at 5.45:1 and
--surface-inverse at 6.82:1. Same gap --ai-violet-on-dark filled for violet.
RETUNED 2026-08-08 from #D89DB4, which was tuned against #363B28 on the
claim that it was "the LIGHTEST dark ground plum ink lands on". That was
false: --accent-hover #2E4A1E is lighter, and Food Hub's entity eyebrows
sit on it at 11px, where #D89DB4 was 4.45:1 — under AA. Exactly the
correction --on-dark-sage needed, for exactly the same reason.
Tune on-dark inks against the LIGHTEST ground they can reach, not
--surface-inverse. --accent-hover is the lightest SOLID one; it is not the
lightest overall — a selected track row is rgba(227,169,27,0.08) over it,
compositing to #3C521E, which is where --on-dark-muted falls to 4.42:1.
(This sentence originally named --accent-hover as the lightest ground in
the app. That was the same over-claim it was written to correct, made one
pass later — the composited grounds are the ones that get forgotten.) Lightening an on-dark ink only improves
darker grounds, so this is safe by construction for every existing call
site (5.19 -> 5.45 on the chip, 6.50 -> 6.82 on --surface-inverse). */
--plum-ink: #7A2F49; /* small plum text on --plum-soft; --plum itself is a fill/node colour */
/* ---- soil ---- */
--soil: #4A3728;
--soil-mid: #5E4A38;
--soil-deep: #3E2E20;
--soil-muted: #7A6450;
--soil-border-light: #6A5340;
/* ---- status & taxonomy chips (bg / ink pairs) ---- */
--stage-bg: #F3E7CE;
--stage-text: #7A5810; /* darker of the two historic values: #8A6414 fell to 4.38:1 on --stage-bg */
--ok-bg: #DFF0DD;
--ok-text: #2E5B36;
--leaf-soft: #E2EEDE;
--leaf-text: #3A6B4A;
--wheat-soft: #EFE6D4;
--wheat-text: #7A5A2E;
--neutral-soft: #EDE7D8;
--neutral-soft-text: #5C5540;
/* ---- foregrounds on dark grounds ---- */
--on-dark-body: #D8DCCB;
--on-dark-body-soft: #DCE2CE;
--on-dark-note: #C9D8BE;
--on-dark-muted: #A9BFA4;
--on-dark-dim: #8CA890; /* deep/abyss grounds ONLY, and it has no consumers today. 5.61:1 on
--surface-inverse but 3.84:1 on --accent-hover and 4.35:1 on --soil.
The previous comment ("the lightest step that clears AA ... there is no
accessible step below this one") was true only of the darkest grounds and
read as a general licence. --on-dark-muted #A9BFA4 is the lightest step that
clears every SOLID dark ground in use (5.05/7.38/5.71); --on-dark-note
#C9D8BE is the step for tinted rows lighter than those. */
--on-dark-link: #9FD4A3;
--leaf-on-dark: #A8D48A; /* bright leaf-green accent on dark: eyebrows, category rules, confirmation
links. 5.89:1 on --accent-hover, 8.60:1 on --surface-inverse. The four
other on-dark greens are each spoken for and none of them is this one:
--on-dark-muted is sage-grey, --on-dark-note pale, --on-dark-link the
link colour, --on-dark-sage the inactive half of a chip pair. Reaching
for sage instead loses the green family cue, the way --on-dark-muted
would have lost the pink one on Mobile Preview's chips. Added 2026-08-08
as the value ALREADY shipping as a literal in 4 files, so every adoption
of it is pixel-identical. */
--on-dark-sage: #7C9A7C; /* inactive half of a gold/sage chip pair on dark. Tuned to the LIGHTEST
dark ground it actually lands on, not the darkest: #6E8A6E cleared
--surface-abyss at 4.75:1 but fell to 3.87:1 on rgba(29,59,42,0.5),
which is where the Sonic Harvest track rows use it. 4.74:1 there now. */
/* ---- foregrounds on soil / ink grounds ---- */
--on-soil-body: #E5DCCB;
--on-soil-muted: #C0AE94;
--on-ink-body: #E4E1D8;
/* ---- aliases: names still referenced in page markup ---- */
--eco-harvest-gold: var(--highlight);
--rl-sun-harvest: var(--highlight);
--eco-living-clay: var(--clay);
--border-on-dark-warm: var(--border-on-dark-soft);
--on-dark-pale: var(--on-dark-body-soft);
--plum-pale: var(--plum-soft);
--soil-border: var(--soil-mid);
--teal-light: var(--teal-on-dark);
}
/* Pages whose page ground is dark rather than cream.
The class goes on the DC's wrapper element, which is a DESCENDANT of body —
so overriding --bg-page here alone would leave `body { background: var(--bg-page) }`
resolving against :root's cream and painting the canvas (visible on scroll-bounce
and as the reported page colour). The body rules below cover that. */
.rl-ink {
--bg-page: var(--bg-page-ink);
--on-dark-note: #C7D6C4;
}
.rl-abyss {
--bg-page: var(--surface-abyss);
}
body:has(.rl-ink) {
background: var(--bg-page-ink);
}
body:has(.rl-abyss) {
background: var(--surface-abyss);
}
/* The DS base sheet sets `h1,h2,h3,h4 { color: var(--text-strong) }`.
These pages colour headings by inheriting from their section ground,
and a matching rule beats inheritance — which turns every uncoloured
heading on a dark ground near-black. Hand inheritance back. */
h1, h2, h3, h4 {
color: inherit;
}