/* ============================================================================ * Mammoth Mushrooms — design tokens * ============================================================================ * * THE source for every colour, typeface, type size, spacing step, radius and * motion value in the theme. Templates reference these variables; templates * never hardcode a value. * * This file must stay byte-identical to * `mammoth-site/theme-child/assets/css/tokens.css`. A PR that changes one says * so in its body, because the other has to move with it. Nothing checks this * automatically. * * PROVENANCE — every value below is one of three kinds, and each is labelled: * EXTRACTED · read out of theme-child/functions.php on 2026-09-04. The site * renders this today. Changing it changes what ships. * DESIGN · measured from the Mammoth design handoff in `source/` * (sampled pixel values, not guesses). No consumer yet. * PROPOSED · a scale, not a measurement. Safe to change; nothing depends * on it. * * NOTE ON EMAIL: the HTML email markup in functions.php cannot use these. * Most email clients (Outlook, parts of Gmail) do not support CSS custom * properties, so `var()` in an inline style renders as nothing. The email * templates must keep literal values — copy them FROM here so the two agree, * and update both together. * ========================================================================= */ :root { /* --- Brand ------------------------------------------------------------ */ /* DESIGN + EXTRACTED. The Mammoth amber. Primary action colour: hero CTA, * add-to-cart, the 19+ chip, the offer badge. functions.php holds #FFB301; * the design handoff renders #FFB300. One point apart — treated as the same * colour, and this token keeps the value the site already ships. */ --mm-color-brand: #ffb301; /* DESIGN. Text and icons sitting on --mm-color-brand. * CHANGED from #ffffff — see OPEN DECISION 1. Nothing reads this token yet, * so the change is inert until a template starts referencing it. */ --mm-color-on-brand: #111111; /* DESIGN. Amber darkened enough to read as text on a light ground, and to * carry small marks. Used for the filled star rating and for label text * inside an amber-tinted chip. */ --mm-color-brand-deep: #805a00; --mm-color-star: #d99800; /* DESIGN. The amber wash behind an inline chip ("MICRO DOSE 90mg", * "LAB TESTED"), and the hairline that closes it. */ --mm-color-brand-tint: #fff7e5; --mm-color-brand-tint-border: #f7e9ca; /* --- Ink (text) ------------------------------------------------------- */ /* MEASURED. Primary text. Read off the live site's computed `body` colour on * 2026-09-04, and the same value the design handoff renders. The email * templates in functions.php still hold #111111 — see OPEN DECISION 2. */ --mm-color-ink: #0a0a0a; /* EXTRACTED. Secondary text: descriptions, meta, captions, eyebrow labels. */ --mm-color-ink-muted: #555555; /* --- Surfaces --------------------------------------------------------- */ /* EXTRACTED. Cards, the product grid, the PDP column. */ --mm-color-surface: #ffffff; /* DESIGN. The warm page ground the whole storefront sits on. This is the * single largest visual change in the redesign: today the site is white and * near-black; the design puts everything on cream. */ --mm-color-canvas: #f6f1e8; /* DESIGN. One step deeper than canvas. Section bands, panel fills, the * placeholder tint behind a product image. */ --mm-color-sand: #ede5d7; /* EXTRACTED. The panel fill used by the transactional email templates. */ --mm-color-surface-muted: #e9e9e9; /* DESIGN. Hairline borders: card edges, outline buttons, filter pills, * the rule under a page eyebrow. */ --mm-color-border: #e5e4e3; /* --- Dose colours ------------------------------------------------------ */ /* EXTRACTED from the pack artwork itself: the ribbon that runs across the * front of each bag, sampled from the product renders. They exist so a dose * card can be outlined in its own dose's colour and match the pack standing * above it. * * These are the ONE sanctioned exception to "never a second hue". They mark * which dose a thing is and nothing else — never a button, never body text, * never a background behind copy. The amber ramp still owns every action. */ --mm-color-dose-micro: #0f8f84; /* Micro · teal */ --mm-color-dose-mini: #d6a63a; /* Mini · gold */ --mm-color-dose-mega: #6b3a86; /* Mega · purple */ /* EXTRACTED from the capsule render, median of the powder column with the * glass rim excluded. It exists so the ground-mushroom motion on the lander * draws in the colour of the thing it depicts rather than an invented brown. * * Not a hue in the palette's sense: never text, never a fill behind copy, * never a border. It is the colour of a material, used only where that * material is shown. */ --mm-color-powder: #8c5d3e; /* ground mushroom */ /* DESIGN. The same near-black as --mm-color-ink, named separately because it * is used as a fill rather than as text: the active filter pill, the savings * flag. Two names, one value, two roles — keep both so a template says which * it means. */ --mm-color-contrast: #0a0a0a; --mm-color-on-contrast: #ffffff; /* --- Type ------------------------------------------------------------- */ /* DECIDED 2026-09-04 by Tyler, from the specimen comparison against the * design handoff. Headings, the hero display and section titles. Urbanist is * a Google Font, so it can be self-hosted or linked; it is not loaded on the * site yet, and loading it is a Flatsome Theme Options change paired with * the typography PR, not part of it. */ --mm-font-display: Urbanist, "Century Gothic", sans-serif; /* DECIDED 2026-09-04 by Tyler. NUMERALS ONLY — prices, review scores, stock * counts, dose figures, the phone number. In the handoff the uppercase * labels and button text are the display face wide-tracked, not this one; * only the digits change face. Also a Google Font. */ --mm-font-numeric: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* DECIDED 2026-09-04 by Tyler: Urbanist everywhere, one face. Body copy, * navigation, form fields, everything that is not a numeral. Matches the * handoff, which sets body in the same geometric face as its headings. * Kanit remains the LAST fallback, not a choice: if Urbanist fails to load, * the page lands on what the site renders today rather than on Times. */ --mm-font-body: Urbanist, "Century Gothic", Kanit, sans-serif; /* Body copy at 300 is too light on the cream ground — Urbanist runs lighter * than Kanit at the same weight. Body text takes this; display type keeps * --mm-weight-light. */ --mm-weight-body: 400; /* EXTRACTED. Accent face, product badge only. Avenir is not a web font and * has no real fallback, so most visitors see the system sans. Retired the * moment the badge starts using --mm-font-display. */ --mm-font-accent: Avenir, sans-serif; /* EXTRACTED. The stack the transactional email templates use. Email is the * only place Montserrat appears, and it is not loaded on the storefront. */ --mm-font-email: Montserrat, Arial, Helvetica, sans-serif; /* PROPOSED 2026-09-05 — the micro label. The offer badge sits over product * photography, so it has to stay out of the way of the product; at 14px with * wide tracking it was a banner across the image. This is the smallest step * the storefront uses and it is only for badges and chips of a word or two, * never for prose. */ --mm-text-2xs: 12px; /* line-height 16px · badge, micro label */ --mm-text-xs: 14px; /* line-height 22px */ --mm-text-sm: 15px; /* line-height 22px */ --mm-text-base: 16px; /* line-height 24px */ --mm-text-lg: 18px; /* line-height 26px */ --mm-text-xl: 20px; /* line-height 28px */ /* PROPOSED — display sizes, derived by measuring the design handoff and * normalising to the 16px body above. Nothing renders at these yet. */ --mm-text-2xl: 24px; /* card / block heading */ --mm-text-3xl: 34px; /* section heading */ --mm-text-4xl: 60px; /* hero display */ --mm-leading-tight: 1.2; /* product badge, display type */ --mm-leading-normal: 1.5; --mm-weight-light: 300; --mm-weight-regular: 400; --mm-weight-bold: 700; /* DESIGN. The eyebrow labels ("CAPSULES", "GUIDANCE", "ALL PRODUCTS") and * the hero display are set uppercase on wide tracking. This is the single * most recognisable typographic move in the design. */ --mm-tracking-wide: 0.12em; /* eyebrow labels, small caps */ --mm-tracking-display: 0.06em; /* hero display */ /* --- Radius ----------------------------------------------------------- */ /* DESIGN. The design handoff draws near-square corners — nothing like a * pill. Measured off the handoff rendered at 300 dpi, by counting the corner * arc's inset row by row and dividing by the export's 3x scale: the amber * hero button's arc runs 12 device pixels, the info chip's 5, the savings * flag's 7. The two large values below are EXTRACTED and belong to the email * templates, which the redesign does not touch. Keeping both sets on * purpose — see OPEN DECISION 4. */ --mm-radius-sm: 2px; /* DESIGN · chips, offer flags */ --mm-radius-btn: 4px; /* DESIGN · buttons */ --mm-radius-card: 4px; /* DESIGN · product cards, panels */ --mm-radius-md: 14px; /* EXTRACTED · email product imagery */ --mm-radius-lg: 18px; /* EXTRACTED · email cards */ --mm-radius-pill: 999px; /* EXTRACTED · email CTA button */ /* --- Spacing ---------------------------------------------------------- */ /* PROPOSED — a 4px scale, not extracted. The values in functions.php today * (3, 6, 9, 10, 12, 14, 16, 18, 20, 22, 24, 25px) do not follow one scale. * Use these for new work; do not retrofit old values just to make them fit. */ --mm-space-1: 4px; --mm-space-2: 8px; --mm-space-3: 12px; --mm-space-4: 16px; --mm-space-5: 20px; --mm-space-6: 24px; --mm-space-8: 32px; --mm-space-10: 40px; --mm-space-12: 48px; --mm-space-16: 64px; --mm-space-20: 80px; /* --- Layout ----------------------------------------------------------- */ /* PROPOSED. Structural sizes that recur often enough to be worth naming, so * a template never has to write a bare px for them either. */ --mm-container-max: 1200px; /* content column, matches the handoff */ --mm-measure: 62ch; /* prose column — a readable line length */ --mm-tile-min: 160px; /* auto-fit grid: smallest a tile may be — * six category tiles fit one row at * --mm-container-max with this floor */ /* PROPOSED 2026-09-15 — one height for every form control in a row. * A text field and the button beside it have to agree on a height or they * read as misaligned however carefully everything else is set; the footer * newsletter row was 43px against 42px. 44px is also the smallest comfortable * touch target, so the accessible number and the tidy one are the same. */ --mm-control-height: 44px; /* FORM · input and button in a row */ --mm-hairline: 1px; /* every border in the design is this */ --mm-focus-ring: 2px; /* focus outline width AND its offset */ --mm-drawer-max: 420px; /* cart drawer width ceiling */ /* --- Shadow ----------------------------------------------------------- */ /* DESIGN. The design lifts a card off the canvas with a soft, low-contrast * shadow rather than a border. Measured as a diffuse edge, expressed here as * a two-layer shadow. */ --mm-shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06); --mm-shadow-raised: 0 2px 4px rgba(17,17,17,.06), 0 16px 40px rgba(17,17,17,.10); /* --- Motion ----------------------------------------------------------- */ /* EXTRACTED. The product-card image zoom in functions.php runs 0.35s ease * and scales to 1.06. Everything else is PROPOSED. */ --mm-motion-fast: 120ms; --mm-motion-base: 200ms; --mm-motion-slow: 350ms; /* EXTRACTED · card image zoom */ --mm-ease: ease; --mm-hover-zoom: 1.06; /* EXTRACTED · card image zoom */ } /* ============================================================================ * OPEN DECISIONS — recorded, deliberately not resolved here * ============================================================================ * * Each of these changes what renders, so each needs Tyler's decision rather * than a guess. Until one is settled, the token above holds the value the site * ships today. * * 1. WHITE OR INK ON AMBER — DECIDED 2026-09-04: ink. `.mm-product-badge` in * functions.php still sets `color:#fff` on the #FFB301 ground, which * measures about 1.9:1, below the 4.5:1 WCAG AA floor for body text and * below 3:1 even for large text. --mm-color-on-brand holds #111111, about * 11:1, matching the handoff's hero CTA, add-to-cart and 19+ chip. * Outstanding work: change the literal in functions.php, and make * add-to-cart amber rather than the black it is today. Both belong to the * global typography and colour PR. * * 2. TWO NEAR-BLACKS — now decided, and one place still disagrees. The live * site's computed body colour is #0a0a0a and the design handoff renders the * same, so --mm-color-ink holds #0a0a0a. The HTML email templates in * functions.php still hold #111111 in about a dozen inline styles. Seven * points apart and invisible side by side, so nothing is broken — but the * token and the email literals no longer agree, and section 5 of the * site-as-code rules says they must. Fixing that is a small email-only PR, * deliberately not folded into a redesign PR. * * 3. TYPEFACES — LARGELY DECIDED 2026-09-04, ONE QUESTION LEFT. Five faces * were in play; here is where each one lands. * · Urbanist — Tyler's answer for the handoff's heading face, picked * against the specimens. Held in --mm-font-display. Not loaded on the * site yet. * · JetBrains Mono — Tyler's answer for the handoff's numeral and label * face. Held in --mm-font-numeric. Not loaded yet either. * · Kanit renders the whole storefront today — body, nav, headings, * prices, buttons — and is set in Flatsome Theme Options, so it is * database and no PR can change it. * · Avenir is asked for by the product badge and by one

on the * product page. Not a web font, no fallback beyond `sans-serif`, so * most visitors get the system sans. Retire it when the badge moves to * --mm-font-display. * · Montserrat appears only in the HTML email templates. * · Roboto (all eighteen weights) and Dancing Script are fetched from * Google Fonts on every page and used by nothing. DECIDED 2026-09-04: * drop both. 674 KB of the home page's 6,753 KB. Theme Options change. * * RESOLVED 2026-09-04: Urbanist everywhere, one face. Body copy is set at * --mm-weight-body (400) rather than 300, because Urbanist runs lighter * than Kanit at the same weight and 300 does not hold its colour on the * cream ground. Display type stays light. Kanit survives only as the last * fallback in the stack, so a font-loading failure lands on what the site * renders today. * 4. TWO RADIUS SCALES LIVE HERE ON PURPOSE. The storefront design is * near-square (2–4px); the email templates are round (14–18px, and a 999px * pill on the CTA). The redesign does not touch email, so both stay. A * template picks the pair that matches its medium. * * 5. THE BADGE IS STYLED TWICE, IN CONFLICT — now half-fixed. The duplicate * jQuery renderer was removed on 2026-09-04, so the