/* ========================================================= Likkle Coders — CANONICAL DESIGN TOKENS (v488) Loads FIRST, before every other stylesheet. --------------------------------------------------------- WHY THIS FILE EXISTS The audit found 625 distinct hex colours, 585 box-shadows, 251 font-sizes and 80 border-radii across 20 stylesheets — and, more tellingly, 211 custom properties spread over TEN separate :root blocks under nine competing prefixes (--lc- --c- --m- --f5- --bh- --v9- --grade- --pz- --tots-). 61% of those colours are used by exactly ONE stylesheet. Only 45 are shared by five or more. So the problem was never "too many colours" — it is that each section brought its own set and nothing ever pulled them together. Ten design systems wearing one coat, arbitrated by 836 !important declarations. This file is the single source of truth those layers never had. --------------------------------------------------------- TWO TIERS, DELIBERATELY Clustering the 625 colours in CIELAB showed they do NOT collapse to one small palette — even 48 clusters only cover 73% of them. That is not sloppiness; the sections encode genuinely different worlds (Jamaica greens, PEP creams, chess browns, Tots brights). Flattening them to one palette would destroy exactly the variety the sections need. So: a CORE every section inherits (neutrals, brand, semantic, elevation, type, radius, motion), plus small NAMED section sets defined in terms of that core. Same system, different rooms — which is the brief. --------------------------------------------------------- NAMING Everything canonical is prefixed --lct- ("Likkle Coders token"). A fresh prefix on purpose: the nine existing ones are still live, and silently redefining --c-ink or --r-md here would change what wins in files that already override them. New names collide with nothing, so this file is additive and cannot alter current rendering on its own. Later rounds migrate the old prefixes onto these, one layer at a time, deleting the !important walls as they go. EASY REVERT: remove the one in index.html. Nothing breaks — every existing token still has its original value. ========================================================= */ :root{ /* ------------------------------------------------------- 1. NEUTRALS — the ground everything sits on. Values are the ones currently WINNING the cascade (v7-jamaica.css loads after styles.css and v6-fable.css), so these describe the app as it actually renders today. ------------------------------------------------------- */ --lct-paper: #FFFFFF; /* cards, sheets, raised surfaces */ --lct-page: #FFF8EC; /* app background — warm cream */ --lct-page-2: #FFFCF3; /* subtle alternate band */ --lct-sand: #F2E7CF; /* sunken wells, inactive tracks */ --lct-line: #EADFC4; /* hairlines and card borders */ --lct-line-soft: #F0E8DC; /* dividers inside a card */ --lct-ink: #0B2545; /* primary text — deep navy */ --lct-ink-2: #33405C; /* secondary text */ --lct-ink-3: #5B6880; /* captions, meta (shared by 6 files) */ --lct-ink-4: #8A97A8; /* placeholders, disabled */ --lct-on-dark: #F4F7FC; /* text on a dark surface */ /* COOL GREY RAMP. The warm cream neutrals above are the app's page furniture, but the codebase also leans hard on a cool slate family (#e2e8f0, #f1f5f9, #64748b, #94a3b8, #334155 and friends) for panels, dividers and muted text — hundreds of uses. Without these, that whole family has nowhere canonical to land and gets merged into something it does not mean: a plain grey divider becoming an "info blue" is a real bug, not a rounding error. Named by lightness so the intent is obvious at the call site. */ --lct-grey-50: #F8FAFC; --lct-grey-100: #F1F5F9; --lct-grey-200: #E2E8F0; --lct-grey-300: #CBD5E1; --lct-grey-400: #94A3B8; --lct-grey-500: #64748B; --lct-grey-600: #475569; --lct-grey-700: #334155; --lct-grey-800: #1E293B; --lct-grey-900: #0F172A; /* NATIONAL FLAG COLOURS — fixed, and not up for design revision. #FFD100 and #009B3A are the Jamaican flag gold and green. They appear 71 and 56 times. They must never be quietly merged into a lookalike brand or grade token: the flag is the flag. */ --lct-flag-gold: #FFD100; --lct-flag-green: #009B3A; --lct-flag-black: #1A1A1A; /* ------------------------------------------------------- 2. BRAND — the four that actually carry the identity. --lct-violet is the single most-used colour in the whole codebase (72 uses across 6 files); --lct-green is the Jamaica green (56 uses across 6). These earned their place by usage, not by being picked. ------------------------------------------------------- */ --lct-violet: #6849F0; --lct-violet-dk: #4B2DDB; --lct-violet-lt: #B5A0FF; --lct-violet-wash: #F4F1FF; --lct-green: #009B3A; --lct-green-dk: #007A2E; --lct-green-lt: #34D399; --lct-green-wash: #E7F9F0; --lct-gold: #F5C518; --lct-gold-dk: #C79A00; --lct-gold-lt: #FFE38A; --lct-gold-wash: #FFF7E6; --lct-coral: #FF6F4D; --lct-coral-dk: #C8492E; --lct-coral-lt: #FFB38A; --lct-coral-wash: #FFF3F0; /* ------------------------------------------------------- 3. SEMANTIC — state, kept separate from brand on purpose. A "correct" green must not drift just because the brand green does; these are read as meaning, not decoration. ------------------------------------------------------- */ --lct-ok: #047857; --lct-ok-soft: #E4F3EE; --lct-warn: #B45309; --lct-warn-soft: #FBF0E0; --lct-danger: #DC2626; --lct-danger-soft: #FEE2E2; --lct-info: #2563EB; --lct-info-soft: #E6EEFB; --lct-info-wash: #EFF6FF; /* palest blue panel background */ /* ------------------------------------------------------- 4. GRADE COLOURS — one per primary grade, used by the grade pickers, PEP banks and report cards. Kept as their own named set because they carry meaning: a child learns "my grade is the teal one". ------------------------------------------------------- */ --lct-g1: #FF6F4D; --lct-g2: #8BD45A; --lct-g3: #1AA7C0; --lct-g4: #8E5BB5; --lct-g5: #F48FB1; --lct-g6: #F5C518; /* ------------------------------------------------------- 5. SECTION ACCENTS — the "different rooms". Each section keeps its own identity, but declares it HERE rather than inventing private hexes inside its own file. Adding a section means adding a line here, not a palette. ------------------------------------------------------- */ --lct-sec-coding: #6849F0; /* Code Lab / Learn Coding */ --lct-sec-robotics: #1AA7C0; /* Robotics + micro:bit */ --lct-sec-ai: #A26EF3; /* AI Lab / Likkle Brain */ --lct-sec-chess: #6B3F2A; /* Chess Academy — mahogany */ --lct-sec-pep: #009B3A; /* PEP practice */ --lct-sec-jamaica: #046A38; /* Likkle Jamaica */ --lct-sec-tots: #FF6F4D; /* Tots Learning World */ --lct-sec-think: #F5C518; /* Likkle Think */ --lct-sec-foundations: #E85A2E;/* Foundations boost */ /* ------------------------------------------------------- 6. ELEVATION — four steps, no more. Lifted wholesale from prestige.css, which already had this right: layered shadows tinted toward the brand navy rather than black, because a single big blur reads as a sticker. 585 distinct shadows in the codebase collapse to these. ------------------------------------------------------- */ --lct-e0: 0 0 0 1px rgba(11,37,69,.055); --lct-e1: 0 1px 2px rgba(11,37,69,.07), 0 2px 6px rgba(11,37,69,.06); --lct-e2: 0 1px 2px rgba(11,37,69,.08), 0 4px 10px rgba(11,37,69,.08), 0 12px 26px rgba(11,37,69,.07); --lct-e3: 0 2px 4px rgba(11,37,69,.10), 0 8px 20px rgba(11,37,69,.10), 0 24px 48px rgba(11,37,69,.10); /* the chunky "sticker" shadow the kid-facing tiles use */ --lct-e-pop: 0 6px 0 rgba(11,37,69,.12); --lct-e-glow: 0 8px 22px rgba(104,73,240,.28); /* ------------------------------------------------------- 7. RADIUS — five steps plus a pill. 80 distinct values in the codebase. Corner rounding is the single loudest signal of "was this one product or five", and unlike type it cannot change layout geometry, which makes it the safest axis to unify first. ------------------------------------------------------- */ --lct-r-xs: 6px; /* chips, tags, tiny controls */ --lct-r-sm: 10px; /* buttons, inputs, small cards */ --lct-r-md: 14px; /* the default card */ --lct-r-lg: 20px; /* feature panels, modals */ --lct-r-xl: 28px; /* heroes, big kid-facing tiles */ --lct-r-pill: 999px; /* pills and circles */ /* ------------------------------------------------------- 8. TYPE — twelve fixed steps, fitted to this app. 82 distinct fixed-rem font-sizes across 2,195 declarations. Rather than impose a textbook ratio, this scale was fitted to where the app's type mass actually sits (weighted 1-D clustering). Two things fell out of that: - 97.6% of declarations are at or below 3rem, and the crowd sits between 0.72 and 1.1rem. So the scale is DENSE at the bottom and open at the top, mirroring real use rather than a geometric ideal. A children's tablet UI is mostly small labels and short buttons. - The heading range still needs real resolution or every h2 and h3 collapses onto one size. Hence four steps above 1.6rem instead of one. FIXED, not fluid. Swapping fixed sizes for clamp() would change how every screen reflows at every width — a far bigger behavioural change than "make it consistent". Headings that want fluidity opt in locally. Sizes above 3rem (the giant Tots letters, hero numerals) are deliberate display choices and are left untouched. ------------------------------------------------------- */ --lct-t-2xs: 0.72rem; /* micro labels, badges */ --lct-t-xs: 0.80rem; /* captions, helper text */ --lct-t-sm: 0.88rem; /* secondary UI, card meta */ --lct-t-md: 0.95rem; /* dense body */ --lct-t-base: 1.00rem; /* body default */ --lct-t-lg: 1.12rem; /* lead paragraph, big label */ --lct-t-xl: 1.30rem; /* card title, h5 */ --lct-t-2xl: 1.55rem; /* h4 */ --lct-t-3xl: 1.85rem; /* h3, section heading */ --lct-t-4xl: 2.20rem; /* h2, page heading */ --lct-t-5xl: 2.60rem; /* h1 */ --lct-t-6xl: 3.00rem; /* hero display */ /* optical tracking — big text tightens, small caps open. Getting this backwards is the commonest reason type reads as amateur, and it was backwards in several layers. */ --lct-track-tight: -.021em; --lct-track-snug: -.012em; --lct-track-caps: .11em; /* ------------------------------------------------------- 9. FONT STACKS Baloo 2 is already loaded and is what v11-modern forces app-wide. Quicksand carries body copy. Neither stack contains Comic Sans, which the audit found in six places. ------------------------------------------------------- */ --lct-f-display: "Baloo 2", "Fredoka", system-ui, -apple-system, sans-serif; --lct-f-body: "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lct-f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* Tots chrome — headings, labels, buttons in the pre-primary world. Rounded and friendly, but still one of our faces. */ --lct-f-tots: "Baloo 2", "Fredoka", "Quicksand", system-ui, sans-serif; /* LETTERFORM-CRITICAL. Used only where a child is reading or tracing a letter shape they are being taught to WRITE: the tracing ghost, the big letter display, sight words. This is the one place Comic Sans was defensible — it has the single-storey 'a' and 'g' that match Jamaican primary handwriting models, which Baloo 2 and Poppins do not. So it stays in the stack, but behind faces built for the job: Sassoon Primary is the schools standard, Andika is SIL's free literacy face, Century Gothic ships with Windows and has the correct single-storey forms. Do not "clean this up" by pointing it at the display face. It is a teaching tool, not decoration. */ --lct-f-trace: "Sassoon Primary", "Andika", "Century Gothic", "Comic Sans MS", "Quicksand", sans-serif; /* ------------------------------------------------------- 10. SPACE, MOTION, TARGETS ------------------------------------------------------- */ --lct-sp-1: 0.25rem; --lct-sp-2: 0.5rem; --lct-sp-3: 0.75rem; --lct-sp-4: 1rem; --lct-sp-5: 1.4rem; --lct-sp-6: 2rem; --lct-sp-7: 3rem; --lct-ease: cubic-bezier(.22,.61,.36,1); --lct-quick: 160ms var(--lct-ease); --lct-calm: 280ms var(--lct-ease); /* 44px is the minimum comfortable tap target; these are primary-school children, often on shared school tablets. */ --lct-tap: 44px; } /* --------------------------------------------------------- NO DARK-MODE BLOCK HERE — ON PURPOSE. index.html sets and the v399 note explains why: the app is designed light only, and on a dark/auto iPad the partial dark CSS in the older layers produces a broken half-dark screen. That meta tag does NOT stop @media (prefers-color-scheme: dark) from matching — it only tells the UA how to render form controls. So a dark block in this file would fire on any dark-OS device and reintroduce exactly the bug v399 was written to kill. When dark mode is done properly it belongs here and nowhere else: redefine these token values in one place, and every layer that reads them follows automatically. That is the whole point of the token layer. But it is a deliberate piece of work — auditing all 20 stylesheets for hardcoded light assumptions — not a side effect of this round. --------------------------------------------------------- */