/* ============================================================================ Kova design system — one source of truth for colour. Before this file, every module carried its own :root block. Thirty of them agreed; a handful did not, and the activity canvas was light in Conjure and dark in Lens, so the same generated activity looked like two different products. Colour now comes from here, and only from here. Two layers, and the distinction matters: PALETTE tokens (--rose, --ink, --blush …) name a colour. They are what the app already used, kept exactly as they were so nothing shifts. SEMANTIC tokens (--surface, --text, --line …) name a JOB. These are new, and they are what makes dark mode possible: a card that asks for "the raised surface colour" follows the theme, while a card that asks for #fff stays white forever. Reach for a semantic token first. Use a palette token only when you mean that specific colour — the brand pink is pink in both themes. ============================================================================ */ :root { /* Text that sits on ALWAYS-DARK chrome - the Lens top bar, the Conjure panel. Those surfaces do not flip with the theme, so their text must not either. --blush and --cream are SURFACE tokens: near-white in light, near-black in dark. Used as a text colour on dark chrome they read fine in light and vanish completely in dark, which is how the Lens title ended up at a 1.04 contrast ratio against its own bar. */ --on-dark: #fdf0f6; --on-dark-dim: #c9aebb; color-scheme: light; /* ---- palette: brand ---- */ --rose: #e8327c; --rose-dk: #b5175a; --rose-dark: #b5175a; /* older alias, kept so nothing breaks */ --rose-mid: #f472b6; --rose-lt: #fce8f2; --blush: #fdf0f6; --cream: #fff8fc; --charcoal: #16080f; /* ---- palette: neutrals ---- */ --ink: #1a0d13; --muted: #8a5a70; --border: #f0c4db; --line: rgba(138, 90, 112, .2); /* ---- palette: status ---- */ --good: #1a6b3c; --good-lt: #eaf3de; --good-mid: #639922; --warn: #854f0b; --warn-lt: #faeeda; --warn-mid: #ef9f27; --bad: #791f1f; --bad-lt: #fcebeb; --bad-mid: #e24b4a; --amber: #854f0b; --amber-lt: #faeeda; /* ---- palette: accents used by charts and category chips ---- */ --purple: #534ab7; --purple-lt: #eeedfe; --teal: #0d7680; --teal-lt: #e0f5f7; --c-a: #e8327c; --c-a-lt: #fce8f2; --c-b: #534ab7; --c-b-lt: #eeedfe; --c-c: #0d7680; --c-c-lt: #e0f5f7; --c-d: #854f0b; --c-d-lt: #faeeda; /* ---- palette: colours the app already used but never named ---- Found by auditing the literals: each of these appears dozens of times across modules. Naming them is what lets dark mode reach them at all. */ --ai: #7c3aed; /* AI-generated / adaptive affordances */ --ai-lt: #f3efff; --mint: #9fe1cb; /* live / connected state */ --mint-dk: #2bc0cc; --pink-soft: #f9d7ea; /* soft dividers on rose surfaces */ --plum: #6b4557; /* secondary heading ink */ --sky: #3b82f6; /* first chart series, info */ --sky-lt: #e6f1fb; --success: #3f7f55; /* inline "correct" tick, distinct from --good */ --danger-soft: #f87171; /* ---- semantic: surfaces ---- --bg the page behind everything --surface a card or panel raised off the page --raised a panel on top of a card (menus, popovers, sticky bars) --sunken an inset well (code blocks, read-only fields, tracks) */ --bg: #fdf5f8; --surface: #ffffff; --raised: #ffffff; --sunken: #fdf0f6; --card: #ffffff; /* older alias for --surface */ --overlay: rgba(20, 8, 14, .45); /* dim behind a modal */ /* ---- semantic: text ---- */ --text: #1a0d13; --text-soft: #8a5a70; /* Was #b09aa4 - 2.37:1 on the sunken surface, well under AA and the smallest text on the page. Darkened so hint and helper text is readable on every light surface. */ --text-faint: #7d6470; --text-on-accent: #ffffff; /* ---- semantic: lines and edges ---- */ --edge: rgba(138, 90, 112, .2); --edge-strong: rgba(138, 90, 112, .38); --focus: #e8327c; /* ---- semantic: the activity canvas ---- The surface a generated activity is drawn on. Conjure and Lens both use these, which is what stops one from being light and the other dark. */ --activity-bg: var(--blush); --activity-surface: #ffffff; --activity-text: #1a0d13; --activity-muted: #8a5a70; --activity-line: rgba(138, 90, 112, .2); /* ---- the shell sidebar ---- It had background:var(--ink). "Ink" is the TEXT colour, and its meaning flips between themes: dark in light mode, near-white in dark mode. So the nav was a dark panel with pale text in one theme and a WHITE panel with pale text in the other - 1.02:1, which is text you cannot see until a hover background appears behind it. The nav is its own surface and now says so, with its own bg/text/edge tokens per theme: a light panel with dark ink in light mode, a dark panel with pale ink in dark mode. Every colour inside it reads from these rather than assuming one or the other. */ --sb-bg: #fdf0f6; /* The brand strip stays this in EVERY theme - the white wordmark needs a dark ground, and #241019 is the same plum the dark theme uses rather than a flat black. */ --sb-brand-bg: #241019; --ic-bg: #fce8f0; --ic-ink: #b5175a; --switch-off: rgba(138,90,112,.25); --switch-edge: transparent; --switch-knob: #ffffff; --pill-good: #3c7a52; --pill-bad: #b5175a; --pill-info: #5a4f9a; --pill-warn: #9a5a1a; --sb-text: #2a1420; --sb-text-dim: #7a5566; --sb-edge: rgba(138, 90, 112, .18); /* The outer boundary, stronger than the internal separators: with a pale nav beside a pale page there is no tonal step left to mark where one ends and the other begins. */ --sb-divider: rgba(138, 90, 112, .34); --sb-hover: rgba(232, 50, 124, .10); --sb-preview-bg: rgba(90, 78, 190, .10); --sb-preview-ink: #4635a8; --sb-preview-hover: rgba(90, 78, 190, .20); --sb-preview-ink-hi: #2f2280; --sb-tag-assign: #fbdbe8; --sb-tag-assign-ink: #8e1049; --sb-tag-live: #d6ecdd; --sb-tag-live-ink: #10502f; --sb-tag-prac: #e6ddfb; --sb-tag-prac-ink: #4a2496; /* ---- solid dark surfaces ---- A quiz screen, a toast, a banner, a sidebar: things that are a dark slab with light text in EVERY theme. They were written as background:var(--ink), but --ink is the TEXT colour and it inverts in dark mode - so 62 places across the app turned into a near-white slab still wearing near-white text. This pair always means "dark fill, light text on it". */ --solid: #1a0d13; --on-solid: #fdf0f6; /* ---- elevation ---- */ /* The "dark" tone an instructor can give an overlay on a slide. Its own tokens so a theme can dress it: the Club theme uses their Inspirational Green rather than Kova's plum. */ --ov-dark-bg: #241019; --ov-dark-fg: #f6eef2; --ov-dark-edge: rgba(255, 255, 255, .16); --ov-dark-line: rgba(255, 255, 255, .22); --shadow-sm: 0 1px 3px rgba(20, 8, 14, .08); --shadow-md: 0 3px 14px rgba(20, 8, 14, .12); --shadow-lg: 0 20px 60px rgba(20, 8, 14, .30); } /* ============================================================================ Dark mode. Set data-theme="dark" on . Only tokens change — no component needs to know which theme is running, provided it asks for a token rather than a literal. The brand pink is deliberately lightened rather than kept: #e8327c on a dark background is legible but reads as muddy, and fails contrast for small text. The near-white text is warm rather than pure #fff, which glares. ============================================================================ */ /* ============================================================================ Boys & Girls Club. The official BGCA palette. Every value below is from their brand sheet: BGCA Blue #0081C6 Professional Blue #004B87 Inspirational Green #84BF00 Service Purple #492F92 Energetic Orange #FF8200 Theatrical Gray #53565A Bold Black #000000 (their black; --ink is a softer #14181c) WHY BGCA BLUE IS NOT THE BUTTON COLOUR White on #0081C6 measures 4.24:1 — under the 4.5:1 that small text needs. It is the identity colour and it is used as one: headers, focus rings, large fills, the brand presence. Anything carrying small white text uses Professional Blue (#004B87, 8.91:1) instead. Green and orange measure 2.2 and 2.5 against white, so they are used as tints behind dark text, never as backgrounds for white text. That is the only liberty taken with the palette, and it is taken so the theme stays readable rather than merely on-brand. ============================================================================ */ :root[data-theme="bgc"] { color-scheme: light; /* ---- the brand, verbatim ---- */ --bgc-blue: #0081c6; /* BGCA Blue */ --bgc-blue-deep: #004b87; /* Professional Blue */ --bgc-green: #84bf00; /* Inspirational Green */ --bgc-purple: #492f92; /* Service Purple */ --bgc-orange: #ff8200; /* Energetic Orange */ --bgc-gray: #53565a; /* Theatrical Gray */ /* ---- accent slots. "rose" is the accent role, not a colour name ---- Deep blue carries white text; BGCA Blue is the identity, used where size makes 4.24:1 acceptable. */ --rose: var(--bgc-blue-deep); --rose-dk: #00365f; --rose-dark: #00365f; --rose-mid: var(--bgc-blue); --rose-lt: #e3f1fa; --blush: #eff7fc; --cream: #f5f9fc; --charcoal: #14181c; --ink: #14181c; --muted: var(--bgc-gray); --border: #c8dced; /* Full-strength brand hues for FILLS - bars, dots, rules, chart series. Nothing sits on these as text, so they can be the real colours. */ --accent-green: var(--bgc-green); --accent-orange: var(--bgc-orange); --line: rgba(20, 24, 28, .14); --good: #4a7300; /* green, deep enough for white text AND its own tint */ --good-lt: #eaf5cc; /* Inspirational Green, as a tint behind dark text */ --good-mid: var(--bgc-green); --warn: #a85400; /* orange, darkened for the same reason */ --warn-lt: #ffe9cc; /* Energetic Orange, likewise */ --warn-mid: var(--bgc-orange); --bad: #c0392b; --bad-lt: #fdeae7; --bad-mid: #e4756a; --amber: #a85400; --amber-lt: #ffe9cc; --purple: var(--bgc-purple); --purple-lt: #ece9f6; --teal: #0f6f80; --teal-lt: #e0f2f5; --c-a: #004b87; --c-a-lt: #e3f1fa; /* category colours: the brand hues */ --c-b: #4a7300; --c-b-lt: #eaf5cc; /* green, darkened: these read as TEXT in badges */ --c-c: #492f92; --c-c-lt: #ece9f6; --c-d: #a85400; --c-d-lt: #ffe9cc; /* orange, likewise */ --ai: var(--bgc-purple); --ai-lt: #ece9f6; --mint: #4a7300; --mint-dk: #0f6f80; --pink-soft: #e3f1fa; --plum: #6b5fa8; --sky: #00639b; /* BGCA Blue darkened: it is used as link text */ --sky-lt: #e3f1fa; --success: #4a7300; --danger-soft: #e4756a; --bg: #f5f9fc; --surface: #ffffff; --raised: #ffffff; --sunken: #eef4f9; /* lifted a shade so hint text clears AA on it too */ --card: #ffffff; --overlay: rgba(0, 26, 45, .45); --text: #14181c; --text-soft: var(--bgc-gray); /* Measured: #8b9299 was 3.15:1 on white - under AA even for hint text. This clears it on every surface in the theme, including the sunken one. */ --text-faint: #667077; --text-on-accent: #ffffff; --edge: rgba(20, 24, 28, .14); --edge-strong: rgba(20, 24, 28, .28); --focus: var(--bgc-blue); /* identity colour, and a focus ring is large */ --activity-bg: #ffffff; --activity-surface: #ffffff; --activity-text: #14181c; --activity-muted: var(--bgc-gray); --activity-line: rgba(20, 24, 28, .14); --solid: #0a1620; --on-solid: #f0f7fc; /* Sidebar: the same dark panel, in the Club's deepest blue. */ --sb-bg: #150a10; /* The brand strip stays this in EVERY theme - the white wordmark needs a dark ground, and #241019 is the same plum the dark theme uses rather than a flat black. */ --sb-brand-bg: #241019; --sb-divider: rgba(240, 196, 219, .26); --sb-text: rgba(240, 247, 252, .90); --sb-hover: rgba(232, 50, 124, .18); --sb-preview-bg: rgba(122, 111, 212, .12); --sb-preview-ink: #c9c2f0; --sb-preview-hover: rgba(122, 111, 212, .22); --sb-preview-ink-hi: #ffffff; --sb-tag-assign: #4a1028; --sb-tag-assign-ink: #f7b9d1; --sb-tag-live: #10331f; --sb-tag-live-ink: #9fd8b6; --sb-tag-prac: #2a1a52; --sb-tag-prac-ink: #c9b6f7; --sb-text-dim: rgba(240, 247, 252, .64); --sb-edge: rgba(240, 247, 252, .16); /* Inspirational Green, deep enough to carry light text at 14.6:1. */ --ov-dark-bg: #1b2600; --ov-dark-fg: #f2f8e6; --ov-dark-edge: rgba(132, 191, 0, .34); --ov-dark-line: rgba(242, 248, 230, .26); --shadow-sm: 0 1px 3px rgba(0, 26, 45, .08); --shadow-md: 0 3px 14px rgba(0, 26, 45, .12); --shadow-lg: 0 20px 60px rgba(0, 26, 45, .28); } :root[data-theme="dark"] { /* Dark box, light glyph - the inverse of light mode, so the icon reads on a dark row. */ --ic-bg: #3a1526; --ic-ink: #f7b9d1; /* Off-state needs a lighter tint AND an edge here - a translucent fill alone reads as nothing against the plum page. */ --switch-off: rgba(240,196,219,.30); --switch-edge: rgba(240,196,219,.55); --switch-knob: #cfb6c3; /* Lifted for a dark row - the light-mode inks go muddy on plum. */ --pill-good: #7fd3a0; --pill-bad: #f78fb0; --pill-info: #b3a8f0; --pill-warn: #e8b169; color-scheme: dark; --rose: #ff5b96; --rose-dk: #ff85b0; /* on dark, "strong accent" means lighter */ --rose-dark: #ff85b0; --rose-mid: #e06a99; /* lifted for dark: at #c9407a the 9-10px labels that use it landed near 4.0 against the panel, under the 4.5 minimum */ --rose-lt: #3a1526; --blush: #241019; --cream: #1d0d15; --charcoal: #f6e9ef; --ink: #f8eef3; /* Lifted: at #c2a3b1 sub-text passed on paper but read as grey shadow rather than words - the pink-tinted greys need more lift on a plum ground than on white. */ --muted: #d4bcc7; --border: #4a2433; --line: rgba(248, 238, 243, .16); --good: #6ecf94; --good-lt: #16301f; --good-mid: #8fd36a; --warn: #f0b45c; --warn-lt: #35240e; --warn-mid: #f0a83a; --bad: #ff8a8a; --bad-lt: #3a1717; --bad-mid: #e56b6b; --amber: #f0b45c; --amber-lt: #35240e; --purple: #a99ef5; --purple-lt: #241f45; --teal: #5cc9d6; --teal-lt: #10333a; --c-a: #ff5b96; --c-a-lt: #3a1526; --c-b: #a99ef5; --c-b-lt: #241f45; --c-c: #5cc9d6; --c-c-lt: #10333a; --c-d: #f0b45c; --c-d-lt: #35240e; --ai: #b9a3ff; --ai-lt: #241f45; --mint: #5fbfa2; --mint-dk: #45c2cd; --pink-soft: #3d1c2b; --plum: #c9a9b9; --sky: #6fa8ff; --sky-lt: #17263a; --success: #6ecf94; --danger-soft: #ff9a9a; --bg: #150a10; --surface: #221019; --raised: #2c1621; --sunken: #100609; --card: #221019; --overlay: rgba(0, 0, 0, .62); --text: #f8eef3; --text-soft: #d4bcc7; /* Measured 3.90:1 on a raised surface - under AA, and it is the size of text least able to afford it. Lifted so hint text is readable on every dark surface. */ --text-faint: #c0aab6; --text-on-accent: #1a0d13; --edge: rgba(248, 238, 243, .16); --edge-strong: rgba(248, 238, 243, .32); --focus: #ff5b96; --activity-bg: #150a10; --activity-surface: #221019; --activity-text: #f8eef3; --activity-muted: #d4bcc7; --activity-line: rgba(248, 238, 243, .16); --solid: #1d0d15; --on-solid: #f8eef3; /* The sidebar is the same dark panel in every theme - see the note in the light block. */ --sb-bg: #150a10; --sb-divider: rgba(240, 196, 219, .26); --sb-hover: rgba(232, 50, 124, .18); --sb-preview-bg: rgba(122, 111, 212, .12); --sb-preview-ink: #c9c2f0; --sb-preview-hover: rgba(122, 111, 212, .22); --sb-preview-ink-hi: #ffffff; /* Light fills with dark ink, from the same pink the active nav item uses (--rose-dk #ff85b0) a step lighter - dark-on-light reads as a deliberate label against a dark row, where a dark fill just merged into it. */ --sb-tag-assign: #ffa3c4; --sb-tag-assign-ink: #2a1420; --sb-tag-live: #9fe0bb; --sb-tag-live-ink: #10331f; --sb-tag-prac: #c9b6f7; --sb-tag-prac-ink: #241546; --sb-text: rgba(253, 240, 246, .88); --sb-text-dim: rgba(253, 240, 246, .62); --sb-edge: rgba(240, 196, 219, .16); --ov-dark-bg: #241019; --ov-dark-fg: #f6eef2; --ov-dark-edge: rgba(255, 255, 255, .16); --ov-dark-line: rgba(255, 255, 255, .22); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --shadow-md: 0 3px 14px rgba(0, 0, 0, .5); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65); } /* A few things browsers draw for us, so they follow the theme too. */ :root[data-theme="dark"] ::placeholder { color: var(--text-faint); } :root[data-theme="dark"] img:not([src*=".svg"]):not(.kova-no-dim) { filter: brightness(.94); } /* Theme changes should not animate every surface at once — it looks broken. Opt a container in with .theme-fade when a soft change is wanted. */ .theme-fade, .theme-fade * { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* THE ANSWER KEY HIDES ITSELF. Conjure is told to write