/* ============================================================================ * Mystwood Studios — Theme Tokens * * WordPress auto-generates --wp--preset--color--*, --wp--preset--spacing--*, * --wp--preset--font-size--*, and --wp--preset--font-family--* from theme.json. * This file mirrors those presets explicitly (so custom CSS and patterns.css * can reference them without relying on load order), then adds the *non-preset* * tokens (radii, shadows, motion) that have no theme.json slot. * * Source of truth: wireframes/figma-token-map.md (STYLE-WP1) * Last synced: STYLE-WP4 — 2026-05-03 * ============================================================================ */ :root { /* ----------------------------------------------------------------------- * Brand — primary violet family (Topic 23 REDESIGN-WP1) * The launch-cut redesign anchors on a saturated violet primary; soft * and glow tints are used for hover surfaces, focus rings, and accent * underlines. Hexes ratified in the Figma design system node 265:611. * ----------------------------------------------------------------------- */ --mw-color-primary: #6765E8; --mw-color-primary-hover: #5F5DE2; --mw-color-primary-pressed: #4F4CD6; --mw-color-primary-soft: #E9E8FF; --mw-color-primary-glow: #A8A7FF; /* Text-only variant. #6765E8 measures 3.72 on the studio-light band and 4.33 * on bg-light — both below the 4.5 small-text floor. This is the same hue and * saturation with lightness lowered until it clears 4.5 (4.51 on studio-light, * 5.25 on bg-light). Used ONLY by --mw-text-accent / --mw-link-color. Never * use it as a fill: --mw-color-primary remains the button, pill and glow * colour and is unchanged. (Topic 33 FIX-WP1) */ --mw-color-primary-ink: #5654E5; /* ----------------------------------------------------------------------- * Neutrals — surfaces + text (Topic 23 REDESIGN-WP1) * bg-dark / bg-light drive page backgrounds; surface-dark is the inset * card / well surface. text-dark / text-light / text-secondary cover * primary + secondary body copy on both backgrounds. * ----------------------------------------------------------------------- */ --mw-color-bg-dark: #0E0841; --mw-color-bg-light: #FAF8FF; --mw-color-surface-dark: #0B0A2E; --mw-color-text-dark: #040420; --mw-color-text-light: #FAF8FF; --mw-color-text-secondary: #B8B4DA; /* ----------------------------------------------------------------------- * Accents — Figma label/hex pairs preserved as-is (Topic 23 REDESIGN-WP1) * The label/hex pairing is intentionally inherited from the Figma design * system so cross-referencing between design specs and code stays 1:1 * even where the label ("moon-gold") and hex ("#9A98FF") seem to drift. * ----------------------------------------------------------------------- */ --mw-color-accent-moon-gold: #9A98FF; --mw-color-accent-spell-teal: #659EE8; --mw-color-accent-story-rose: #65E8BA; --mw-color-accent-night-blue: #E8659E; /* ----------------------------------------------------------------------- * Status — success / warning / error / info (Topic 23 REDESIGN-WP1) * Used by form validation states, cookie banner CTAs, press kit * download status pills, and notice patterns. * ----------------------------------------------------------------------- */ --mw-color-success: #35D07F; --mw-color-warning: #F5A524; --mw-color-error: #FF5A6A; --mw-color-info: #65B7FF; /* Status -ink siblings (Topic 33 FIX-WP10) — the four colours above are FILL * colours (pill backgrounds, banner chips, badge fills); as TEXT on a light * surface they measure 1.90-2.88 and fail AA outright. These are declared * but NOT consumed anywhere today: verified live, no status-coloured text * renders on any light surface on the site (_cookie-banner.css and * _press-kit.css contain zero status tokens; _leadcapture.css:102's markup * is dead code, never emitted since Topic 28's Gravity Forms migration). * They exist so the first light-surface consumer is correct by default. * On the K-World bands these four must NOT be used — FIX-WP8's namespaced * --mw-gf-error-ink / --mw-gf-success-ink govern there instead, because * #E70016 and #1F834F measure only 1.99-3.18 on kw-sky/kw-gold. */ --mw-color-success-ink: #1F834F; --mw-color-warning-ink: #A16607; --mw-color-info-ink: #0072D6; --mw-color-error-ink: #E70016; /* ----------------------------------------------------------------------- * Section rhythm — vertical spacing (Topic 23 REDESIGN-WP1) * Locks the section-to-section and headline-to-paragraph cadence * across every page so the redesigned chrome reads as one composition. * ----------------------------------------------------------------------- */ --mw-space-section: 120px; --mw-space-headline-to-paragraph: 24px; --mw-space-paragraph-to-cta: 36px; /* ----------------------------------------------------------------------- * Typography — two-family system (Topic 27 BRAND-WP5, ratified 2026-07-04) * Ice Cream Man = display (headlines, nav, buttons, eyebrows); Poppins = * body (paragraph + UI copy). Mirrors the Claude Design system tokens * (.claude/skills/mystwood-design/tokens/typography.css) exactly. Ice Cream * Man @font-face lives in assets/css/components/_ice-cream-man.css; Poppins * is enqueued from Google Fonts in mystwood_studios_ab_scripts(). Punchline * is retired to a legacy token only (degrades to Ice Cream Man) — the face * is kept below for any surviving legacy reference. System fallback covers * the FOUT window + JS-disabled clients. * ----------------------------------------------------------------------- */ --mw-font-display: "Ice Cream Man", system-ui, sans-serif; --mw-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mw-font-punchline: "Punchline", "Ice Cream Man", system-ui, sans-serif; /* ----------------------------------------------------------------------- * Radii — Figma `radius/*` tokens (no theme.json slot) * Source: wireframes/figma-token-map.md §Radii * ----------------------------------------------------------------------- */ --mw-radius-soft: 8px; --mw-radius-round: 999px; --mw-radius-pill-tl: 10px; --mw-radius-pill-tr: 4px; --mw-radius-pill-br: 10px; --mw-radius-pill-bl: 4px; /* ----------------------------------------------------------------------- * Shadows — Figma `shadow/elevation-*` orphan tokens (no theme.json slot) * Source: wireframes/figma-token-map.md §Orphan tokens * Components: y-offset, blur, and alpha composed into CSS shorthand * ----------------------------------------------------------------------- */ --mw-shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.12); --mw-shadow-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.16); /* ----------------------------------------------------------------------- * Layout — non-preset helpers (mirrors theme.json settings.layout) * ----------------------------------------------------------------------- */ --mw-content-size: 1152px; --mw-wide-size: 1280px; --mw-header-h: clamp(80px, 8.5vw, 100px); /* sticky-header height; photographic heroes bleed up under it (Claude Design .chero, site.css) */ /* ----------------------------------------------------------------------- * Studio brand — homepage lavender accent (Topic 17 RENDER-WP11) * * The pre-WP-2 baseline (`5497f28:patterns/page-home.php`) used the FSE * `accent-violet-soft` preset (#e1e8f9 lavender) to paint the homepage * "Discover the Comfort of the Coloring world" book-promo band, sandwiched * between the studio-dark sections by the torn-paper-down + scallop-down * dividers. Theme.json deletion in WP-2 removed that auto-emitted preset, * so the token is declared here as the canonical `studio-light` source * (matches the design-page SKILL §Background tokens contract). Hex value * is byte-identical to the deleted FSE preset. * * Long-form (`--wp--preset--color--studio-light`) preserves the same * selector shape that FSE patterns would have used; short-form * (`--studio-light`) is what section CSS partials reach for in * `[data-bg-token="studio-light"]` rules (see _media-text.css). * ----------------------------------------------------------------------- */ --wp--preset--color--studio-light: #e1e8f9; --studio-light: var(--wp--preset--color--studio-light, #e1e8f9); /* Studio-violet — RESTORED to #0e0a2a (Topic 33 FIX-WP25, owner ruling * 2026-08-01). A violet-tinted dark used by inner-page body sections to give * a soft rhythm between pure studio-dark bands. * * HISTORY — collapsed, then restored. Both rulings are the owner's, six days * apart, and the second is not a reversal of a mistake. Keep both records: * deleting the first is how the same argument gets re-litigated from scratch. * * FIX-WP19 (2026-07-31) collapsed this token onto --studio-dark. ~30 band * transitions across ~13 templates carried NO divider, so every * studio-dark -> studio-violet change landed as a hard horizontal edge. * That edge is real: the two tones are 1.031:1 by WCAG, which made it look * negligible, but WCAG is a *luminance* ratio for text legibility and is * nearly blind to a shift that is mostly chroma. In CIELAB the step is * dE 19.15 against a ~1.0 JND — ~19x — and plainly visible on /about/. * * FIX-WP25 (2026-08-01) restored it. The collapse worked, and cost more * than it saved: TEN pages (/clear-the-skies/, /kaeros-hub/, * /kaeros-timeline/, /lore-entry/, /a-balance-lost/, /about/, /careers/, * /devblog/, /roadmap/, /press/) rendered exactly ONE band colour while * their templates still declared a full alternating rhythm. The owner's * testing pass called them "the same dull long page ... same color". * * WHY BOTH RULINGS ARE CONSISTENT. WP-19 put the remedy up as an either/or — * ~30 divider inserts OR retire the tone — because with one tone those strips * would paint dark-on-dark, invisible, while each still cost a -56px shift. * That reasoning is correct GIVEN one tone. The framing was the error: the * answer is both, and both is only coherent if the tone comes back first. * Hence FIX-WP25 (this token) then FIX-WP26 (the seams). Do not ship one * without the other, and do not deploy between them. * * Why the TOKEN survived the collapse instead of being deleted. ~13 templates * pass 'bg_token' => 'studio-violet' and several CSS files carry * [data-bg-token="studio-violet"] rules (_button.css outline buttons, * gravity-forms.css, _studio.css card surfaces + the divider painter). * Repointing the value moved the *colour* while every selector, arg and audit * anchor kept resolving -- which is exactly why restoring it is this one line * and not a sweep. Those three CSS files already carry #0e0a2a as their * var() fallback, so literal and fallback agree again automatically. * * Contrast is safe BY CONSTRUCTION in BOTH directions, not by luck. * studio-dark (L* 5.86) is LIGHTER than studio-violet (L* 4.31), so for the * light text these dark bands carry, studio-dark is the STRICTER surface. * The collapse therefore converged every pair onto an already-audited * studio-dark figure; the restore moves each back to the more forgiving * violet figure, so no pair can cross a threshold going this way either: * eyebrow #A8A7FF 8.53 -> 8.80, body #FAF8FF 17.65 -> 18.20, secondary * 12.53 -> 12.89, gilt #A87D32 5.00 -> 5.15. (The pre-FIX-WP25 text of this * block cited secondary as "12.23 -> 11.86", which matched no computed value * — a WP-19 slip, corrected here rather than carried forward.) Verified on * the alpha-composited rows too (contrast_audit.py): a darker background * darkens the composited foreground as well, so the direction is not * self-evident, but the background drop dominates — worst case * rgba(255,255,255,.50) goes 5.13 -> 5.28. All rows improve. * * ⚠ COUPLED FILE. _hero.css's Clear the Skies dissolve ramps rgba(14,8,65,*) * — studio-DARK — and terminates at var(--studio-violet). While the tones * were equal that was self-consistent; it is not once they diverge, so * FIX-WP25 re-derived those stops to rgba(14,10,42,*). If this token ever * moves again, re-derive them again. */ --wp--preset--color--studio-violet: #0e0a2a; --studio-violet: var(--wp--preset--color--studio-violet, #0e0a2a); /* Studio-dark — the dark studio band + body background. * Topic 27 BRAND-WP4 (Foundation, 2026-07-04): repointed from the #040420 * near-black body-dark inherit to the Claude-Design-synced #0E0841 * (--mw-color-bg-dark, declared above). The DS section painter renders * data-bg-token="studio-dark" bands at #0E0841; matching it here flows to * every studio-dark band, the divider "paint outgoing tone" strips, and the * KLEI overlap mechanism automatically (all reference --studio-dark). * (The DS token file confusingly also declares a separate studio-dark=#040420 * token, but its band painter uses #0E0841 — we match the rendered band.) */ --studio-dark: var(--mw-color-bg-dark, #0E0841); /* ----------------------------------------------------------------------- * K-World brand palette (Topic 17 RENDER-WP7) * * Classic theme — there is no theme.json since RENDER-WP2 deleted FSE. * These six custom properties replace the WordPress-auto-generated * --wp--preset--color--kw-* tokens that the FSE theme.json used to emit. * Hex fallbacks match _button.css and the Topic 13 K-World palette ruling. * Topic 13 KWORLD-WP1/WP2/WP3 + POLISH-WP2 + POLISH-WP3-C tone-locked. * * --kw-corruption (#79BD63) is the one later addition, ruled in on * 2026-07-26 during Topic 33 FIX-WP3. It is the leaf green of the * Darkening's corruption veins — sampled at hue 105° from the designer * mockup task3-make-it-like.png, where it accents the "Corrupted * ramparts" gallery tile. The theme's pre-existing greens * (--mw-color-success, --mw-color-accent-story-rose) are mint/teal at * 149–159° and read wrong against that artwork, hence a new token * rather than a reuse. * * Long-form (--wp--preset--color--kw-*) preserves the same selector shape * the original FSE patterns used (.has-kw-*-background-color etc.) so * existing component CSS continues to resolve. * Short-form (--kw-*) is what section partials reach for in is-brand-kw * variant rules — declared in the WP-7 master doc. * ----------------------------------------------------------------------- */ --wp--preset--color--kw-sky: #3FA7D6; --wp--preset--color--kw-gold: #F4C430; --wp--preset--color--kw-cream: #FFF1D6; --wp--preset--color--kw-sunset: #FF7E5F; --wp--preset--color--kw-castle-stone: #7A6E5C; --wp--preset--color--kw-corruption: #79BD63; --kw-sky: var(--wp--preset--color--kw-sky, #3FA7D6); --kw-gold: var(--wp--preset--color--kw-gold, #F4C430); --kw-cream: var(--wp--preset--color--kw-cream, #FFF1D6); --kw-sunset: var(--wp--preset--color--kw-sunset, #FF7E5F); --kw-castle-stone: var(--wp--preset--color--kw-castle-stone, #7A6E5C); --kw-corruption: var(--wp--preset--color--kw-corruption, #79BD63); /* Topic 33 FIX-WP6 — SURFACE variants. Band fields only. * * kw-sky and kw-gold above are ACCENTS: buttons, chips, hero badges, and the * per-rider card colours passed by the Clear the Skies template (Adam = gold, * Kaya = sky). They are unchanged and must stay so. * * These two paint the page-sized BANDS. Ratified "Option C": sky shifts from * cyan 199deg to periwinkle 222deg — a true complement to the gold, and close * enough to the studio primary 6765E8 that the studio and K-World looks rhyme. * Gold softens to butter. Both keep dark ink well above AA (8.44 and 13.46). */ /* FLIPPED TO WHITE — Topic 36 CORR-WP1 Item 2 (owner directive 2026-08-25: * "Change the color of this --kw-sky-surface and --kw-gold-surface to * white to all kworld pages"). Both siblings now resolve to #FFFFFF; every * consumer of these tokens (band painters, hero bleeds, focus rings, the * Gravity Forms field-border contrast note) is repaired or verified * elsewhere in this WP — see the per-file notes at each consumer. * --kw-sky (#3FA7D6) / --kw-gold (#F4C430), the ACCENT siblings above, are * UNCHANGED — only the *-surface band-field tokens move. */ --wp--preset--color--kw-sky-surface: #FFFFFF; --wp--preset--color--kw-gold-surface: #FFFFFF; --kw-sky-surface: var(--wp--preset--color--kw-sky-surface, #FFFFFF); --kw-gold-surface: var(--wp--preset--color--kw-gold-surface, #FFFFFF); /* ----------------------------------------------------------------------- * Lore brand palette (Topic 17 RENDER-WP8) * * Topic 14 manuscript/codex visual identity — the third distinct brand * after Studio and K-World. Loud surfaces (parchment + vellum) for prose * backgrounds; accent triad (verdigris / amethyst / gilt) for the three * Kaeros landing pages; ink/oxblood for foreground text in occasional * dark-on-light contexts. * * Tone-locked from Topic 14 LORE-WP3 theme.json palette (committed * `69928f6e`). Hex values are byte-identical to the deleted FSE palette * so any lore content carried over from Topic 14 renders identically. * * Long-form (--wp--preset--color--lore-*) preserves the same selector * shape the original FSE patterns used (.has-lore-*-background-color * etc.) so any surviving lore content keeps resolving. Short-form * (--lore-*) is what section partials reach for in is-brand-lore variant * rules. * ----------------------------------------------------------------------- */ --wp--preset--color--lore-parchment: #F2E6CB; --wp--preset--color--lore-vellum: #E5D5B0; --wp--preset--color--lore-ink: #1B1410; --wp--preset--color--lore-oxblood: #6B2418; --wp--preset--color--lore-gilt: #A87D32; --wp--preset--color--lore-hub: #2F5240; --wp--preset--color--lore-cosmology: #4A3B7A; --wp--preset--color--lore-timeline: #A87D32; --wp--preset--color--lore-gilt-ink: #765823; --lore-parchment: var(--wp--preset--color--lore-parchment, #F2E6CB); --lore-vellum: var(--wp--preset--color--lore-vellum, #E5D5B0); --lore-ink: var(--wp--preset--color--lore-ink, #1B1410); --lore-oxblood: var(--wp--preset--color--lore-oxblood, #6B2418); --lore-gilt: var(--wp--preset--color--lore-gilt, #A87D32); --lore-hub: var(--wp--preset--color--lore-hub, #2F5240); --lore-cosmology: var(--wp--preset--color--lore-cosmology, #4A3B7A); --lore-timeline: var(--wp--preset--color--lore-timeline, #A87D32); /* --lore-gilt-ink (Topic 33 FIX-WP10) — gilt A87D32 measures 2.56 on * lore-vellum and 3.00 on lore-parchment: it fails AA as text. This is the * same hue/saturation with lightness lowered until it clears 4.5 on the * stricter (vellum) surface: measured #765823 = 4.54 on vellum, 5.31 on * parchment. One value covers both surfaces. Gilt on the DARK lore bands * (studio-dark 5.00, studio-violet 5.15) already passes and must NOT be * swapped to this — that is why --lore-gilt-text below is a surface-scoped * indirection, not a blanket token swap. */ --lore-gilt-ink: var(--wp--preset--color--lore-gilt-ink, #765823); /* --lore-gilt-text (Topic 33 FIX-WP10) — the indirection every gilt TEXT * rule in lore.css / _card-grid.css consumes. Defaults to --lore-gilt * (correct on the dark lore bands, where every gilt text element renders * today) and is repointed to --lore-gilt-ink only on the light lore * surfaces via the context block below. */ --lore-gilt-text: var(--lore-gilt, #A87D32); /* ----------------------------------------------------------------------- * Lore brand typography (Topic 17 RENDER-WP8) * * Topic 14 design language: system-serif H1/H2 (Georgia stack, zero KB, * zero render-blocking). Reach for this via var(--mw-font-lore-serif) * in .mw-section--brand-lore variant rules. * ----------------------------------------------------------------------- */ --mw-font-lore-serif: Georgia, "Times New Roman", "Iowan Old Style", serif; /* ----------------------------------------------------------------------- * Semantic text tokens (Topic 33 FIX-WP1) * * One indirection between "what a piece of text is" and "what colour it * takes on this band", so a band declares its own text colours once * instead of every component hardcoding them. * * Accent and links default to the brand violet, NOT currentColor. The * designer's corrections.css §1 declares `--mw-text-accent: currentColor`, * which is right in their React prototype (its light-band eyebrow is * ink-coloured) and wrong here — this theme's light-band eyebrow is * violet. Shipping §1 verbatim would silently strip the brand violet from * every light-band eyebrow on the site. Deviation logged in the WP. * * --mw-text-primary / --mw-text-secondary may safely default to * currentColor: no rule hardcodes them today, so light bands keep * inheriting exactly what they inherit now. * ----------------------------------------------------------------------- */ --mw-text-accent: var(--mw-color-primary-ink); --mw-link-color: var(--mw-color-primary-ink); --mw-link-hover: var(--mw-color-primary-hover); --mw-text-primary: currentColor; --mw-text-secondary: currentColor; } /* --------------------------------------------------------------------------- * Dark studio bands — semantic text redefinition (Topic 33 FIX-WP1) * * Scope is Studio bands only. Kaeros and the warm K-World dark bands keep * their own accents; their contrast failures belong to FIX-WP10. * * .mw-on-dark is already emitted by inc/games/rider-section.php:72 and until * now consumed nothing — this is what starts consuming it. No markup change. * * The eyebrow deliberately does NOT go pure white (brief item 6): * --mw-color-primary-glow is an existing token in the same violet family, so * the brand read is unchanged. Measured: #A8A7FF on studio-dark = 8.53, on * studio-violet = 8.80. * --------------------------------------------------------------------------- */ .mw-on-dark, [data-bg-token="studio-dark"], [data-bg-token="studio-violet"] { --mw-text-primary: var(--mw-color-text-light); /* #FAF8FF — 17.65 */ --mw-text-secondary: rgba(255, 255, 255, 0.82); /* 12.53 */ --mw-text-accent: var(--mw-color-primary-glow); /* #A8A7FF — 8.53 */ --mw-link-color: var(--mw-color-primary-glow); --mw-link-hover: #ffffff; } /* --------------------------------------------------------------------------- * Band prose links (Topic 33 FIX-WP1) * * Scoped deliberately. The designer's corrections.css §1 uses a bare `a` * selector, which is safe in a 20-page static prototype but here would * recolour header nav, footer columns, breadcrumbs, post content and the * cookie banner. Restricted to prose inside a band. * --------------------------------------------------------------------------- */ /* ⚠️ Wrapped in `:where()` by Topic 33 FIX-WP15 (2026-07-29). * * Scoping this to band prose was right; the specificity was not. `.mw-section__body a` * is (0,1,1), which outranks `.mw-btn--primary` at (0,1,0) — so a primary CTA * that happens to sit inside a band's prose wrapper had its LABEL repainted to * the link colour. Measured on `/press-kit/`: the "Download press kit (ZIP)" * button's label rendered `#A8A7FF` on its `#6765E8` fill — **2.09:1**. * * This is the same defect FIX-WP15 removed from `style.css`'s stock `_s` rules, * one file over: a rule intended as a default, written with enough specificity * to act as an override. `:where()` drops it to zero, so band prose links still * get the token and any component with an opinion about its own colour keeps it. */ :where(.mw-section__content a, .mw-section__intro a, .mw-section__body a) { color: var(--mw-link-color); } :where(.mw-section__content a:hover, .mw-section__intro a:hover, .mw-section__body a:hover) { color: var(--mw-link-hover); } /* --------------------------------------------------------------------------- * Lore gilt text — surface-aware indirection (Topic 33 FIX-WP10) * * --lore-gilt-text defaults to --lore-gilt (5.00/5.15 on the dark lore bands, * where every gilt text element renders today). Repointed to --lore-gilt-ink * only on the light lore surfaces, where raw gilt fails (2.56 vellum / 3.00 * parchment). The third clause is NOT redundant: _card-grid.css:237 paints * brand-lore cards vellum unconditionally (and :246-248 inverts to parchment * on vellum bands), so the card is a light surface even when the band token * itself is dark. * --------------------------------------------------------------------------- */ [data-bg-token="lore-parchment"], [data-bg-token="lore-vellum"], .mw-section--brand-lore .mw-card { --lore-gilt-text: var(--lore-gilt-ink, #765823); } @font-face { font-family: "Punchline"; src: url("../fonts/punchline-regular.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }