/* ============================================================================ BayRen design tokens — the ONE source for colour, type, shape and spacing. Asaf, 4 September 2026. WHAT THIS IS, AND WHY IT IS SEPARATE FROM main.css -------------------------------------------------- This file declares VARIABLES ONLY. Not one class name. That is deliberate: `sync_core.sh` shares `core/ui/main.css` with just five apps, because Vocabulary and Writing were measured (25 Aug 2026) to lose ~313 and ~219 of their own classes if their sheet were swapped. A file with no classes cannot orphan anything, so THIS file is safe to copy into every app in the estate — including the mock and Leads, which are not in apps.conf at all. Each app links this BEFORE its own stylesheet, then maps its legacy token names onto these in a short alias block. The app keeps its class names; only the values underneath change. Vocabulary and the mock's mock.css already work this way, which is where the pattern comes from. THE RULES (from Asaf, 4 Sep 2026) --------------------------------- * The page is WHITE. Colour is decorative and chosen per page — it does not encode which app you are in, and a hue carries no fixed meaning. His words: the white background looks clean, and the colourful elements add life. * GOLD IS RETIRED from the interface. It lives on in the logo artwork only. Navy survives as the ink, which is what keeps a page tied to the logo. * A NEW COLOUR IS A TOKEN, NEVER A HEX IN A PAGE. THE ONE EXCEPTION TO "COLOUR MEANS NOTHING" ------------------------------------------- Signals. A wrong answer must never look like a right one, so --correct, --wrong, --waiting and --info keep a fixed meaning everywhere and are never re-toned for decoration. Everything else is free. CONTRAST IS NOT A MATTER OF TASTE HERE. Every `-solid` below is at least 4.5:1 on white, so it is safe for body text, and at least 4.5:1 on its own tint. Every `-tint` stays under 1.2:1 against white so it reads as a soft panel rather than a colour block. `test_design_tokens.py` in BayRen Platform proves all of it and fails the build if a value is ever nudged out of range. ============================================================================ */ :root { /* ── The eight decorative hues ───────────────────────────────────────────── Each is a trio: the TINT is what you mostly see (a section's ground), the SOLID carries text and fills a capsule, the EDGE draws a border. Yellow is worth knowing about: a true yellow cannot carry text on white at any readable contrast, so yellow lives as the amber TINT with a dark amber solid for its words. It looks yellow; it reads. */ --rose-solid: #bf4156; --rose-tint: #fdeef2; --rose-edge: #f6d9e0; --orange-solid: #a8551f; --orange-tint: #fdf1e8; --orange-edge: #f6ddcb; --amber-solid: #8a660f; --amber-tint: #fbf4e0; --amber-edge: #f0e3bd; --green-solid: #2d7b63; --green-tint: #e9f5f1; --green-edge: #cfe8df; --teal-solid: #26737f; --teal-tint: #e6f3f5; --teal-edge: #c8e5ea; --blue-solid: #2f6fb0; --blue-tint: #ebf2fb; --blue-edge: #d3e3f6; --indigo-solid: #4a5bb5; --indigo-tint: #eceefb; --indigo-edge: #d8dcf5; --purple-solid: #7a4a7d; --purple-tint: #f5edf6; --purple-edge: #e8d9ea; /* The tone a component paints itself in. A wrapper class (.tone-green and friends, below) overrides these three, and every component inside follows. That is what makes "a different colour on this page" one word of markup. COMPONENTS MUST READ THESE — never a hue by name. */ --tone: var(--blue-solid); --tone-tint: var(--blue-tint); --tone-edge: var(--blue-edge); /* ── Ink and ground ─────────────────────────────────────────────────────── --d-ink is a soft navy-black, not the brand navy and not pure black: 15:1 on white, and close enough to the logo that a page still reads as BayRen once the gold is gone. */ --d-ink: #14283c; --d-muted: #5b6b80; --d-faint: #8496a8; --d-line: #e4e9ef; --d-line-strong: #d3dae3; --d-ground: #ffffff; --d-sunken: #f5f7fa; /* inactive states and table headers only */ /* ── Signals: fixed meaning, never decorative ───────────────────────────── Kept on the estate's existing names so nothing has to be rewired. The green and red the estate had been using were carried over here and FAILED the check on their own backgrounds (4.08:1 and 4.24:1), so both are a shade deeper now. That is the whole reason the test exists. */ --correct: #1a7a51; --correct-bg: #e8f6ef; --wrong: #c23a37; --wrong-bg: #fdecec; --warn: #8a660f; --warn-bg: #fbf4e0; --info: #2f6fb0; --info-bg: #ebf2fb; /* The same four under a `--d-` name, for the same reason --d-ink and --d-line are prefixed: core/ui/main.css declares --correct, --wrong and --warn ITSELF, on :root, and it is linked AFTER this file — so in the five apps that share it, main.css's shallower green and red win and the deeper values above never reach the page. An app aliasing its legacy names needs a name main.css does not own, and `--correct: var(--correct)` is circular. Identical values, declared once here; if one moves, both move. */ --d-correct: #1a7a51; --d-correct-bg: #e8f6ef; --d-wrong: #c23a37; --d-wrong-bg: #fdecec; --d-warn: #8a660f; --d-warn-bg: #fbf4e0; --d-info: #2f6fb0; --d-info-bg: #ebf2fb; /* ── Type ───────────────────────────────────────────────────────────────── Unchanged — it already works. The only difference is that display type is no longer gold. */ --d-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --d-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --d-font-bn: 'Noto Sans Bengali', 'Inter', sans-serif; /* ── Shape ──────────────────────────────────────────────────────────────── Four radii, each with a job. A capsule is fully round; a tablet is the default card; a group is a rounded list; an input is gentler than both. */ --d-r-capsule: 999px; --d-r-tablet: 16px; --d-r-group: 14px; --d-r-input: 10px; --d-r-sm: 8px; /* ── Depth ──────────────────────────────────────────────────────────────── ONE shadow. Depth comes from tint and edge; stacking shadows is what makes a page look like a pile of boxes. */ --d-shadow: 0 1px 2px rgba(20,40,60,.05), 0 6px 20px rgba(20,40,60,.05); /* ── Spacing ────────────────────────────────────────────────────────────── The shared sheet had no spacing scale, which is exactly why spacing kept being typed into style="" attributes — 485 of them in the mock alone. */ --d-s1: 4px; --d-s2: 8px; --d-s3: 12px; --d-s4: 16px; --d-s5: 24px; --d-s6: 32px; --d-s7: 48px; --d-s8: 64px; /* ── Motion ───────────────────────────────────────────────────────────────*/ --d-ease: cubic-bezier(.22,.9,.35,1); --d-fast: .16s var(--d-ease); --d-med: .26s var(--d-ease); } /* ── Choosing a page's colour ─────────────────────────────────────────────── Put one of these on any wrapper. Everything inside repaints.
…
Nesting works: an inner .tone-rose wins inside its own subtree. */ .tone-rose { --tone: var(--rose-solid); --tone-tint: var(--rose-tint); --tone-edge: var(--rose-edge); } .tone-orange { --tone: var(--orange-solid); --tone-tint: var(--orange-tint); --tone-edge: var(--orange-edge); } .tone-amber { --tone: var(--amber-solid); --tone-tint: var(--amber-tint); --tone-edge: var(--amber-edge); } .tone-green { --tone: var(--green-solid); --tone-tint: var(--green-tint); --tone-edge: var(--green-edge); } .tone-teal { --tone: var(--teal-solid); --tone-tint: var(--teal-tint); --tone-edge: var(--teal-edge); } .tone-blue { --tone: var(--blue-solid); --tone-tint: var(--blue-tint); --tone-edge: var(--blue-edge); } .tone-indigo { --tone: var(--indigo-solid); --tone-tint: var(--indigo-tint); --tone-edge: var(--indigo-edge); } .tone-purple { --tone: var(--purple-solid); --tone-tint: var(--purple-tint); --tone-edge: var(--purple-edge); } .tone-ink { --tone: var(--d-ink); --tone-tint: var(--d-sunken); --tone-edge: var(--d-line); } /* Signals are tones too, so a notice can be built from the same components without a component ever naming a signal colour. */ .tone-correct { --tone: var(--correct); --tone-tint: var(--correct-bg); --tone-edge: #bfe3d0; } .tone-wrong { --tone: var(--wrong); --tone-tint: var(--wrong-bg); --tone-edge: #f4cbc9; } .tone-warn { --tone: var(--warn); --tone-tint: var(--warn-bg); --tone-edge: #f0e3bd; } .tone-info { --tone: var(--info); --tone-tint: var(--info-bg); --tone-edge: #d3e3f6; } /* ── The palette cycle ────────────────────────────────────────────────────── Asaf, 4 September 2026, after seeing the estate live: "i didnt want different color styles for different apps, i didnt want that. it looks odd. fix it. Same colors, but colorful." So a hue no longer says which app you are in. Every app wears the SAME accent (tone-teal) for its buttons, links and focus rings, and the colour comes from HERE instead: put `br-cycle` on a container and its children take the six hues in a fixed order, the same order in every app. A row of subject cards looks the same in Vocabulary as it does in Speaking. Six, not eight: rose and orange sit too close together to read as separate steps, and amber has to follow a cool hue to register at all. The order is chosen so no two neighbours share a family. It sets VARIABLES only, like the .tone-* wrappers above — it paints nothing itself, so any component that reads --tone follows it automatically. */ .br-cycle > *:nth-child(6n+1) { --tone: var(--teal-solid); --tone-tint: var(--teal-tint); --tone-edge: var(--teal-edge); } .br-cycle > *:nth-child(6n+2) { --tone: var(--amber-solid); --tone-tint: var(--amber-tint); --tone-edge: var(--amber-edge); } .br-cycle > *:nth-child(6n+3) { --tone: var(--indigo-solid); --tone-tint: var(--indigo-tint); --tone-edge: var(--indigo-edge); } .br-cycle > *:nth-child(6n+4) { --tone: var(--rose-solid); --tone-tint: var(--rose-tint); --tone-edge: var(--rose-edge); } .br-cycle > *:nth-child(6n+5) { --tone: var(--green-solid); --tone-tint: var(--green-tint); --tone-edge: var(--green-edge); } .br-cycle > *:nth-child(6n+6) { --tone: var(--purple-solid); --tone-tint: var(--purple-tint); --tone-edge: var(--purple-edge); }