/* Kinlight design tokens — the FIRST shared frontend asset in this project. Every app page (index.html, dashboard.html, school-admin.html, admin.html, parent_portal.html, parent_consent.html) and the marketing site link this file directly, rather than each maintaining its own duplicated :root block. See docs/design-system.md for the full rules this file encodes: one meaning per accent (gold=AI, sage=teacher's content/positive, ember=needs attention), contrast findings, and every specific remapping decision. Dark theme: two mechanisms, both supported — 1. Automatic, following the device/browser's own prefers-color-scheme. 2. An explicit override via , checked BEFORE the media query, for a future in-app settings toggle (no toggle UI exists yet — this file just makes the CSS ready for one). --hearthwood and --oatlight are deliberately treated as a matched inverse pair in both themes: anywhere a rule does `background: var(--hearthwood); color: var(--oatlight);` (or the reverse), the pairing stays correctly high-contrast in both themes automatically, since the two tokens always invert together. This is why the universal `button { background: var(--hearthwood); color: white; }` pattern across every app file was changed to `color: var(--oatlight)` as part of this rollout — a literal "white" would have gone invisible against a dark-mode hearthwood button in that now-inverted state, and this is what your `color: var(--oatlight)` buttons rely on. REVISED, second dark-theme pass — gold/sage/ember now have REAL dark-theme variants (see the dark-theme block below), superseding this file's own original "these stay constant" decision. That first version caused a real bug: a tinted box (e.g. --ember-bg) stayed light while its own text (--ember-text, if left constant) either stayed dark (illegible on unrelated dark surfaces) or was patched to a fixed dark value that read as a light card floating on a dark page, not a real dark-theme surface. Now BOTH halves of each `-bg`/`-text` (and `-border`) pair flip together — dark, desaturated tinted backgrounds paired with light, higher-luminance text — the same "flip together" contract --hearthwood/--oatlight already had, extended to gold/sage/ember. This uncovered a SECOND, more widespread pre-existing bug while fixing the first: --ember-text/--sage-text are also used standalone, as plain error/ success text sitting on the ORDINARY page/card background (e.g. #loginError, #billingError, #newProfileError — dozens of sites), never inside a tinted box at all. Under the old "stays constant" design, these rendered at only ~2.6–2.9:1 contrast against a dark-mode page (see docs/design-system.md's contrast findings) — failing AA, and nobody had caught it because dark theme had never been screenshotted for these specific elements before this pass. Making --ember-text/--sage-text theme-dependent fixes BOTH bugs from one change: a dark page's surfaces (both the ordinary page/card background AND the new dark tinted-box backgrounds) are all dark, so the same light --ember-text/--sage-text value reads correctly against either. ONE ROLE HAD TO STAY CONSTANT, and needed its own new token to do so: --ember-text/--sage-text are ALSO used as a SOLID FILL for a few small, saturated UI chips (.dangerBtn, a .pill badge, the mic "recording" pulse), always paired with white/--on-accent text. Flipping --ember-text/ --sage-text for THIS role would break that pairing (a light fill can't carry white text). --ember-solid/--sage-solid are new, deliberately constant tokens carrying exactly the value --ember-text/--sage-text used to have everywhere (before they became theme-dependent) — used ONLY by those specific solid-fill-with-on-accent-text call sites, never by a tinted-box background or its own text. --gold-text has no such fill usage anywhere in the codebase (checked directly), so it needed no equivalent --gold-solid token — it flips cleanly on its own. */ :root { /* Neutrals */ --hearthwood: #2E2A22; --oatlight: #F1EFE5; --fog: #D8D3C6; --muted: #6B6659; --card-bg: #FFFFFF; --chat-card-bg: #F9F7F2; /* index.html's own floating chat-card layer — deliberately distinct from --card-bg, never merged into it */ /* Gold — AI-generated content only. Never a non-AI UI element. --gold-bg/--gold-text are the tinted-box pair (see the dark-theme block below for their dark-mode values); bare --gold is the constant icon/border/link accent, unaffected by this pass. */ --gold: #BD8A3D; --gold-text: #8A6224; --gold-bg: #FBF1D9; /* Sage — teacher's own published content, and positive/confirmed status. --sage-bg/--sage-text are the tinted-box pair (dark-mode values below); bare --sage is the constant icon/fill/border accent (fails AA as body text, never use it for text); --sage-solid is the constant SOLID-FILL value (see the file header comment) for a chip/button paired with --on-accent white text — never used for a tinted box or its own text. */ --sage: #6B8564; --sage-solid: #4F6B4A; --sage-text: #4F6B4A; --sage-bg: #E4EBE0; --sage-lesson-bg: #EDF2EA; /* new, distinct pairing: "this content is drawn from your teacher's published lesson" — tracks --sage-bg/--sage-text's own dark-mode values, see below */ --sage-lesson-text: #4F6B4A; /* Ember — needs attention / destructive / error. Same three-role split as sage above: --ember-bg/--ember-text tinted-box pair (dark-mode values below), bare --ember reserved for future icon/border use (currently unused directly, kept for symmetry), --ember-solid the constant solid-fill value for a chip/button paired with --on-accent. */ --ember: #9C4A3C; --ember-solid: #9C4A3C; --ember-text: #9C4A3C; --ember-bg: #F6E9DD; --ember-border: #E7C4B8; /* Text color for a saturated, CONSTANT solid-fill accent (--ember-solid/ --sage-solid, or bare --gold's own border-only uses) — a plain white that never needs to flip, since the fills it sits on don't either. */ --on-accent: #FFFFFF; /* Sign in with Apple's own official black-button style (see CLAUDE.md's design report) — a genuinely NEW category, not --hearthwood: Apple's own Human Interface Guidelines require this button stay black (or white/white-outline) regardless of the host app's own theming, since re-theming it would undermine the brand recognition the guidelines exist to protect. --hearthwood is the wrong token here specifically BECAUSE it correctly flips to a light value in dark theme (see this file's own header comment) — this token deliberately does NOT flip, same "constant, theme-invariant" contract as --on-accent right above it, for the same underlying reason (a fixed brand requirement, not a themeable UI color). */ --apple-signin-bg: #000000; /* index.html's own ".headerPillLink" text color — kept as its own token rather than merged into --muted, since its exact value was independently contrast-checked and documented (~6.10:1 against its own pill fill, ~6.81:1 against the plain card background) and merging it into --muted (a very close but not identical value) would make that specific, already-verified math stale without re-checking it. */ --header-pill-text: #5c5648; /* Translucent overlay tints — hover states / shadows derived from --gold / --hearthwood at a few specific opacities, used repeatedly across the app. CSS custom properties can't be interpolated into rgba()'s alpha channel directly (short of `rgb(from var(...) ...)`, patchy support), so these are their own literal tokens rather than computed from --gold/--hearthwood at each call site. */ --shadow-soft: rgba(46, 42, 34, 0.08); --gold-tint-08: rgba(189, 138, 61, 0.08); --gold-tint-10: rgba(189, 138, 61, 0.1); --gold-tint-12: rgba(189, 138, 61, 0.12); --gold-tint-22: rgba(189, 138, 61, 0.22); /* Hearthwood-based hover/interaction tints — REPLACE the equivalent --gold-tint-* values at every hover/focus/nav-link site this rollout's third pass moved off gold (see docs/design-system.md): gold is reserved for AI content, and a generic hover highlight isn't that. Unlike the gold tints, these MUST be theme-aware (overridden in the dark-theme blocks below) — they're derived from --hearthwood's own RGB, which itself flips between themes, so a tint of it has to flip too (a "dark tint" of a color that's gone light would be backwards). */ --hearthwood-tint-08: rgba(46, 42, 34, 0.08); --hearthwood-tint-10: rgba(46, 42, 34, 0.1); --hearthwood-tint-12: rgba(46, 42, 34, 0.12); --hearthwood-tint-22: rgba(46, 42, 34, 0.22); /* Neutral black-based scrims (modal backdrops, subtle hover states, the mobile drawer's own shadow) — not brand-hued, so not derived from any other token above, but still real color literals needing a name for the color-lint script to accept. */ --scrim-backdrop: rgba(0, 0, 0, 0.4); --scrim-hover: rgba(0, 0, 0, 0.06); --scrim-drawer-shadow: rgba(0, 0, 0, 0.15); /* dashboard.html's own hearthwood-based scrims/shadows (dismissable modal backdrop, non-dismissable wizard/consent-overlay backdrop, elevated panel shadow, hovered stat-tile shadow) — same reasoning as the scrim-*/gold-tint-* tokens above. */ --overlay-backdrop-modal: rgba(46, 42, 34, 0.45); --overlay-backdrop-strong: rgba(46, 42, 34, 0.6); --shadow-elevated: rgba(46, 42, 34, 0.25); --shadow-hover: rgba(46, 42, 34, 0.12); /* Muted, desaturated class-color palette — for distinguishing CLASSES (a school's Period 3 vs. Period 4, a family's multiple kids' subjects, etc.) only. Never use one of these for a status/severity signal — that's what gold/sage/ember are for. */ --class-color-1: #8695A6; --class-color-2: #A68C6D; --class-color-3: #7C9885; --class-color-4: #A67C96; --class-color-5: #8C8367; --class-color-6: #6D8AA6; --class-color-7: #A6836D; --class-color-8: #7C7C99; /* Typography */ --font-serif: "Fraunces", serif; --font-sans: "Work Sans", -apple-system, sans-serif; --font-mono: "IBM Plex Mono", monospace; } /* Dark-theme overrides. Neutrals (hearthwood/oatlight/fog/muted/card-bg/chat-card-bg) invert, as before. gold-bg/gold-text, sage-bg/sage-text (+ sage-lesson-bg/-text), and ember-bg/ember-text/ember-border ALSO now have real dark-mode values — see the file header comment for why this superseded the original "stays constant" design, and for why --ember-solid/--sage-solid/bare --gold/ --sage/--ember/--on-accent/the class-color palette are deliberately left OUT of this block and so stay byte-for-byte the same in both themes: they back small, saturated solid-fill chips (paired with --on-accent) or plain icon/border accents, never a tinted box, so flipping them would break those existing pairings for no benefit. Every value below is verified against tests/test_color_contrast.py's own automated pair-contrast check (see that file, and docs/design-system.md's "Dark theme" section for the exact ratios) — not eyeballed. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hearthwood: #F1EFE5; --oatlight: #1C1A15; --fog: #3A362C; --muted: #B0A99C; --card-bg: #24221C; --chat-card-bg: #211F1A; --gold-bg: #3A2E1A; --gold-text: #EAD39D; --sage-bg: #243024; --sage-text: #9CC291; --sage-lesson-bg: #243024; --sage-lesson-text: #9CC291; --ember-bg: #3A211D; --ember-text: #E8A99A; --ember-border: #B07A6C; --hearthwood-tint-08: rgba(241, 239, 229, 0.08); --hearthwood-tint-10: rgba(241, 239, 229, 0.1); --hearthwood-tint-12: rgba(241, 239, 229, 0.12); --hearthwood-tint-22: rgba(241, 239, 229, 0.22); } } :root[data-theme="dark"] { --hearthwood: #F1EFE5; --oatlight: #1C1A15; --fog: #3A362C; --muted: #B0A99C; --card-bg: #24221C; --chat-card-bg: #211F1A; --gold-bg: #3A2E1A; --gold-text: #EAD39D; --sage-bg: #243024; --sage-text: #9CC291; --sage-lesson-bg: #243024; --sage-lesson-text: #9CC291; --ember-bg: #3A211D; --ember-text: #E8A99A; --ember-border: #B07A6C; --hearthwood-tint-08: rgba(241, 239, 229, 0.08); --hearthwood-tint-10: rgba(241, 239, 229, 0.1); --hearthwood-tint-12: rgba(241, 239, 229, 0.12); --hearthwood-tint-22: rgba(241, 239, 229, 0.22); }