/* ========================================================================== tokens.css — Heroes & Cool Kids (H&CK) brand variables -------------------------------------------------------------------------- These are the H&CK *customer* brand tokens (green / cream / warm). Do NOT put HCTD's oat/navy platform palette here — that's reserved for the HCTD marketing site and any future billing/admin layer. 2026-07-28 — PALETTE UNIFIED ON THE LANDING PAGE. The landing page (index.html) had drifted into a separate, warmer, better system: cream ground, emerald green, gold accent. Dre's call was that the landing page wins, so its palette is now canonical here and the other nine pages inherit it automatically. The token NAMES are deliberately unchanged. components.css (30KB) already references --green / --bg / --text / --border, so re-pointing the VALUES re-themes the entire app without touching a single component rule. ========================================================================== */ :root { /* --- Brand greens ------------------------------------------------------ One ladder, darkest to lightest. The logo's #124f00 is the bottom rung (--green-ink) rather than a rival to the emerald, so hck-logo.svg reads as in-system instead of clashing with the UI green. */ --green-ink: #124f00; /* darkest — the literal logo fill */ --green-deep: #0d5a37; /* pressed / deep headings */ --green: #137a4b; /* PRIMARY brand green (from the landing page) */ --green-mid: #1a8f5a; /* hover / success */ --green-light: #e7f1ea; /* wash, success backgrounds */ /* --- Gold accent (landing page) --------------------------------------- The one saturated warm accent. Use sparingly — highlights, not chrome. ⚠️ --gold is a FILL, never body text: it scores only 2.29:1 on cream. As a background it is excellent (ink on gold = 6.11:1). When gold must be text, use --gold-ink (5.30:1 on cream). */ --gold: #d99413; --gold-light: #fbf0d8; --gold-ink: #8a5a06; /* --- Visit / program accents ------------------------------------------ Program-coded, so these carry DATA meaning (Sidekicks, Visit 2/3) and are intentionally left as-is. Revisit only with the legend in view. */ --lime: #5a8a00; /* Sidekicks */ --navy: #1a4280; /* Visit 2 / accent */ --purple: #5a3285; /* Visit 3 */ /* --- Amber (warnings / highlights) ------------------------------------ */ --amber: #92400e; --amber-light: #fef3c7; /* --- Text ramp (warm near-black, not pure grey) ------------------------ */ /* Measured against --bg #f6f2e8. Only --faint was changed from the landing page's own ramp: its #8a968c scores 2.75:1 and fails WCAG AA outright, so adopting the landing palette verbatim would have shipped that bug to all ten pages. #636f67 is the nearest tone that clears 4.5:1. */ --text: #1a2620; /* primary text — 14.00:1 PASS */ --muted: #5b6a60; /* secondary text — 5.11:1 PASS (landing's) */ --faint: #636f67; /* tertiary / hints — 4.70:1 PASS (corrected) */ /* --- Surfaces & lines -------------------------------------------------- */ --border: #e4dece; /* hairlines, dividers (warm, not cool grey) */ --border-strong:#d3cbb6; /* emphasized dividers */ --off: #f1ede1; /* off-white panel / input fill */ --bg: #f6f2e8; /* warm cream page background */ --surface: #fffdf8; /* cards / panels sit above the cream bg */ /* --- HCTD "powered by" mark (platform, intentionally subdued) ---------- */ --hctd-ink-muted: #5A6273; /* --- Semantic status colors (derived from the brand ramp) -------------- */ --success: var(--green-mid); /* NOT aliased to --green-light. When the palette moved to the landing page's softer wash (#e7f1ea), "done" badges and filled chart cells measured 1.01:1 against --off — a filled cell and an empty one were indistinguishable at a glance, and scanning that grid is the entire point of the Schools chart. This is a deliberately more saturated green so the SIGNAL survives; ink on it is 12.07:1. */ --success-bg: #cfe8d9; --warn: var(--amber); --warn-bg: var(--amber-light); --info: var(--navy); --info-bg: #e7eefb; /* light navy tint */ --danger: #b42318; /* error / destructive */ --danger-bg: #fee4e2; /* --- Type families ----------------------------------------------------- */ /* Alexandria matches heroesandcoolkids.org (their site uses it everywhere). Swap these two lines to re-theme typography across the whole app. */ --font-sans: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Type scale (rem) -------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ /* --- Spacing scale (4px base) ------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px; /* --- Radius ------------------------------------------------------------ Softened to match the landing page (its --r:16 / --r-sm:10). This is the most visible single change to the interior pages — if buttons and badges read too pillowy, these four lines are the revert. */ --radius-sm: 10px; --radius: 16px; --radius-lg: 20px; --radius-full: 999px; /* --- Shadows ----------------------------------------------------------- Tinted with the warm ink rather than neutral black, so they don't read as grey haze on a cream ground. */ --shadow-sm: 0 1px 2px rgba(26, 38, 32, 0.06); --shadow: 0 1px 3px rgba(26, 38, 32, 0.08), 0 4px 12px rgba(26, 38, 32, 0.05); --shadow-lg: 0 8px 28px rgba(26, 38, 32, 0.12); /* --- Focus ring (keyboard accessibility) ------------------------------- */ --focus-ring: 0 0 0 3px rgba(19, 122, 75, 0.30); /* emerald @ 30% */ /* --- Layout ------------------------------------------------------------ */ --maxw: 1080px; /* app content max width */ --maxw-narrow: 720px; /* forms / reading width */ } /* "Powered by HCTD" footer mark — low contrast, small, unobtrusive. Lives on every H&CK page, fixed bottom-right, links to the platform. */ .hctd-mark { position: fixed; right: 12px; bottom: 10px; z-index: 50; font-size: 12px; line-height: 1; color: var(--hctd-ink-muted); text-decoration: none; opacity: 0.7; transition: opacity 120ms ease; } .hctd-mark:hover { opacity: 1; text-decoration: underline; }