/* © 2026 Feel Better Studios, LLC. All rights reserved. rc-tokens.css — v1.3.000 / 2026-08-27 / Michael, CTO · Theo, PPD THE COLOURS. ONE FILE. Both worlds read it: the back office through rc-base.css, the member app through rc-member.css. WHY IT EXISTS, measured on 2026-08-23 rather than assumed. The palette was written out twice, once in index.html and once in rc-base.css: · 36 tokens in the member app, 34 in the back office · 30 token NAMES appeared in both · 2 of those 30 had ALREADY DRIFTED, before the member app grew past one page 🔴 AND MY OWN NOTE IN rc-base.css WAS PART OF THE PROBLEM. It said only 6 CSS lines were common to all nine pages, which is TRUE OF THE COMPONENTS and false of the palette. A measurement of the wrong thing, quoted later as if it settled the right thing. Corrected in that file too. WHAT IS NOT IN HERE, on purpose. Anything whose value legitimately differs between the two worlds is NOT a shared token and stays in the look file that owns it: · --measure back office 980px, member app 1120px. Different reading widths. · --side-rail, --side-w the back office left rail. The member app has no rail. Putting those here would mean one of the two worlds is always overriding the shared file, which is the same duplication wearing a tidier coat. THE THREE BLOCKS BELOW CARRY THE SAME DARK VALUES ON PURPOSE. The media query serves a reader who has set nothing; the attribute serves an explicit choice; an explicit choice has to win in both directions. */ /* ============================================================================ LAYER 1 — THE BRAND PALETTE. Copied verbatim from the Color System table in CTO/docs/brand-guidelines.md. These eleven values are the brand. Nothing anywhere may invent a colour; everything below is built out of these. If the brand guidelines change, this block is the only place to edit. ========================================================================== */ :root{ /* ── THE TYPE SCALE ──────────────────────────────────────────────────────── Spec: PPD/SPEC-type-scale-2026-08-24.md. Jeremy, 08:51 that morning: "I think my eyes are getting worse so I think we need to" look at our text sizes. 🔴 IN rem, NOT px, AND THAT IS THE WHOLE POINT. A px size ignores the reader's browser setting. In rem, every one of these follows it, so when he makes text bigger in his browser the app actually gets bigger. Values below are what they come to at a default root of 16px. 🔴 AFTER THIS, A RAW px FONT SIZE IS A DEFECT, exactly as an invented colour already is. Otherwise we have eight tokens and a twenty-second size within a month, which is the position we were in before this file existed. */ --t-xs: 0.75rem; /* 12px · the smallest we are willing to print: table headers, chips, counts */ --t-sm: 0.84375rem; /* 13.5px · captions, the secondary line under a title */ --t-md: 0.9375rem; /* 15px · labels, buttons, tray items, table cells */ --t-base: 1.0625rem; /* 17px · body text */ --t-lg: 1.25rem; /* 20px · card titles, section headings */ --t-xl: 1.5rem; /* 24px · screen titles */ --t-2xl: 2.125rem; /* 34px · the one big number on the member app */ --t-3xl: 2.875rem; /* 46px · the pass count */ --brand-navy:#213165; /* Brand Navy hero/section backgrounds, headings */ --brand-blue:#2ED2FF; /* Electric Blue the accent. One per section, max. */ --brand-orange:#FF7700; /* Brand Orange urgency signals ONLY, used sparingly */ --brand-offwhite:#EFEFF4; /* Off-White page and card backgrounds */ --brand-muted:#AABDE6; /* Muted Blue subheads on navy ONLY */ --brand-body:#444444; /* Body Text body copy on light backgrounds */ --brand-secondary:#555555; /* Secondary Text descriptions, captions */ --brand-border:#E0E0E0; /* Light Border boxes, dividers, inputs */ --brand-card:#F5F5F5; /* Review Card card backgrounds */ --brand-gold:#F4A800; /* Gold star ratings only */ --brand-white:#FFFFFF; /* ── WHAT TEXT GOES ON A SOLID ACCENT ───────────────────────────────────── 🔴 ADDED 2026-08-25 AFTER MEASURING. Jeremy: "in dark mode, things can't get dark. The text can't get dark. The background gets dark, but everything else needs to get light. Otherwise, I can't read it." 🔑 THE PRECISE VERSION, and it is Theo/PPD's: TEXT CONTRASTS WITH WHAT IS DIRECTLY BEHIND IT, NOT WITH THE PAGE. On a solid accent the foreground has to follow that accent, not the page ground. ⚠️ AND ONE TOKEN CANNOT DO IT, which is what the measuring found. In DARK mode every accent turns light, so one dark foreground serves all four (6.9 to 11.5). In LIGHT mode they split: --yes and --no are dark and want WHITE, --warn and --accent are bright and want NAVY. White on light --warn is 2.66 and on --accent is 1.78. So it is one token per accent, and the value is measured rather than chosen. Against the 4.5 minimum, every pairing below: --on-yes light 5.26 dark 9.25 --on-no light 5.96 dark 6.91 --on-warn light 4.66 dark 8.42 --on-accent light 6.96 dark 11.52 */ --on-yes: var(--brand-white); --on-no: var(--brand-white); --on-warn: var(--brand-navy); --on-accent: var(--brand-navy); /* NOT IN THE BRAND PALETTE, and said so rather than hidden. The guidelines define no error red, no success green and no shadow. A screen has states a print palette does not. These are ours, kept to a minimum, and are the only invented values in the file. Marcus/CMO owns whether they become brand. */ --derived-alert:#B23A26; --derived-alert-soft:#FBE9E5; --shadow:0 1px 2px rgba(33,49,101,.06), 0 10px 30px rgba(33,49,101,.08); /* ============================================================================ LAYER 2 — ROLES. What a screen actually reaches for, pointed at layer 1. This is what makes the palette enforceable: a role can only ever be a brand value. ========================================================================== */ --paper:var(--brand-offwhite); /* the page */ --raised:var(--brand-white); /* anything sitting on it */ --sunk:var(--brand-card); /* a well inside a card */ --rule:var(--brand-border); --ink:var(--brand-navy); /* headings and anything that must be read first */ --body:var(--brand-body); --ink-soft:var(--brand-secondary); /* 🔴 CHANGED 2026-08-23 FROM #8A8F9C, WHICH FAILED CONTRAST ON EVERY BACKGROUND WE OWN. Ruled by Theo/PPD; found by his own legibility check, which walks up the tree to the first ancestor that actually paints a ground and computes the real ratio against the WCAG threshold for that size and weight. 23 of 188 text elements on the live member app were failing, and every single one was this token: the accordion counts, the chevrons, the "signed in as" line, the tab counts. #8A8F9C -> paper 2.82 sunk 2.97 raised 3.24 AA needs 4.5 #686D7A -> paper 4.52 sunk 4.75 raised 5.18 🔑 THIS WAS CHANGEABLE WITHOUT ASKING MARCUS FOR ONE REASON: it is not a brand colour. The old comment on this line said so itself, "brand defines no third tier". We invented it, so we could fix it. ⚖️ It is the LIGHTEST value on this hue that clears 4.5 everywhere, on purpose: faint text should stay as faint as it is allowed to be. One step lighter, #696E7B, drops to 4.45 and fails. The tier ladder survives: ink 10.83, body 8.50, ink-soft 6.50, ink-faint 4.52. ⚠️ NOT CLAIMED: nobody has yet LOOKED at all 23 places to see whether the screens still read the way they should at 4.52. That is a look, not a measurement, and it is Theo's. */ --ink-faint:#686D7A; --navy:var(--brand-navy); --navy-ink:var(--brand-white); /* rule 1: white headlines on navy */ --navy-soft:var(--brand-muted); /* rule 1: #AABDE6 subheads, navy only */ --accent:var(--brand-blue); /* rule 6: the one thing the eye should go to */ /* 🔴 THE ONE TOKEN THAT HAD DRIFTED, and the argument is Theo/PPD's, 2026-08-23. The member app said var(--brand-navy) here with a comment reading "#2ED2FF is far too light to be text. Navy is." The premise is right and was worth writing down: raw Electric Blue on white is 1.78:1 and genuinely cannot be text. The answer was wrong. · BOTH files already said #7FE3FF in dark, a light cyan. That is the accent made readable, not the navy made light. Navy in light mode would mean the token meant two different things depending on the reader's setting, and nobody reaching for it could predict which. · --ink is ALREADY navy. An --accent-ink that is also navy does nothing, and the accent would never appear as text in light mode at all. The member app would have one fewer level of emphasis than the back office and nobody chose that. Contrast does not decide it and should not be quoted as if it did: #0B5E7A on white is 7.25:1, navy is 12.41:1, both comfortably past AA. Darkening the cyan spends nothing; spending the accent costs a level of emphasis. */ --accent-ink:#0B5E7A; --accent-soft:#E4F7FE; /* derived tint of Electric Blue, backgrounds only */ --warn:var(--brand-orange); /* rule 5: urgency only, never decoration */ --warn-soft:#FFF1E2; /* derived tint of Brand Orange */ --warn-ink:#9A5200; /* derived: #FF7700 fails contrast as small text */ --yes:#1F7A5A; --yes-soft:#E4F4EE; --no:#B23A26; --no-soft:#FBE9E5; --alert:var(--derived-alert); --alert-soft:var(--derived-alert-soft); --focus:var(--brand-navy); --gutter:22px; } /* ============================================================================ DARK. 🔴 THE BRAND GUIDELINES DEFINE NO DARK PALETTE, so every value in the two blocks below is DERIVED and none of it is brand. What is held fixed on purpose: Electric Blue stays the accent and Brand Orange stays the urgency colour, both lifted just enough to hold up on a dark ground. The surfaces are the only things genuinely invented. Marcus/CMO owns whether any of this becomes brand; until he rules, treat it as a working derivation. ========================================================================== */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0D1424; --raised:#141D31; --sunk:#0A101C; --rule:#26314A; --ink:#E7EBF3; --body:#D3D9E6; --ink-soft:#A7B0C6; --ink-faint:#828CA3; --navy:#22314F; --navy-ink:#E7EBF3; --navy-soft:#A7B0C6; --accent:#5FDCFF; --accent-ink:#7FE3FF; --accent-soft:#0E2434; --warn:#FF9540; --warn-ink:#FFB169; --warn-soft:#2B1C0C; /* Every accent above is a LIGHT tint in dark mode, so all four foregrounds become the same near-black ground. Measured: 6.91 to 11.52 against 4.5. */ --on-yes:#0D1424; --on-no:#0D1424; --on-warn:#0D1424; --on-accent:#0D1424; --yes:#5FCBA4; --yes-soft:#0F2A22; --no:#E8836C; --no-soft:#2E1712; --alert:#E8836C; --alert-soft:#2E1712; --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4); --focus:#5FDCFF; } } :root[data-theme="dark"]{ --paper:#0D1424; --raised:#141D31; --sunk:#0A101C; --rule:#26314A; --ink:#E7EBF3; --body:#D3D9E6; --ink-soft:#A7B0C6; --ink-faint:#828CA3; --navy:#22314F; --navy-ink:#E7EBF3; --navy-soft:#A7B0C6; --accent:#5FDCFF; --accent-ink:#7FE3FF; --accent-soft:#0E2434; --warn:#FF9540; --warn-ink:#FFB169; --warn-soft:#2B1C0C; /* Same four as the media query above. 🔴 BOTH COPIES OR NEITHER: a palette that flips on the media query and not on the attribute is correct for a system-dark machine and invisible for anyone who picks dark by hand, which is exactly the person most likely to notice. */ --on-yes:#0D1424; --on-no:#0D1424; --on-warn:#0D1424; --on-accent:#0D1424; --yes:#5FCBA4; --yes-soft:#0F2A22; --no:#E8836C; --no-soft:#2E1712; --alert:#E8836C; --alert-soft:#2E1712; --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4); --focus:#5FDCFF; }