/* HPDS token pipeline (2026-08-13): generated from /root/hpds/tokens/hpds-tokens.json, which also generates the mobile equivalent (hp2 in theme.js) — the manual-sync gap between the two is closed by this single source. To change a value: edit hpds-tokens.json, run `node /root/hpds/tokens/build-tokens.js`, do not edit theme.generated.css by hand. @import must be the first rule(s) in the file per the CSS spec — everything else below is regular rules, not more imports. */ @import url('theme.generated.css'); @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&family=IBM+Plex+Sans+Arabic:wght@400;600;700&family=Readex+Pro:wght@400;500;600&display=swap'); /* ─── HEALTH PACE DESIGN TOKENS ────────────────────────────────────────────── Single source of truth for the website — mirrors /root/diethub-mobile/theme.js exactly for the dark-mode values. "Oasis Wellness" palette (2026-08-12, replaced the earlier aubergine/ochre identity at the founder's explicit direction): three real accent roles instead of one generic brand color — oasis teal (calm/primary), palm/tertiary green (life/health), hospitality gold (warmth/secondary) — plus a distinct AI indigo, since AI and hospitality are called out as separate accents in the source brief. Existing page CSS keeps its old variable NAMES (--lime, --orange, etc.) so no selector needs to change — only the values underneath move to the new palette. Two blocks below: dark pages `` this file and add class="hp-dark" (or nothing extra, dark is the default here since most of the site is dark-hero already); light pages (dashboard.html) add class="hp-light" to the element. */ :root, .hp-dark { --lime: #E3B85C; /* was ochre #E3B364 — primary CTA, now hospitality gold (mobile hp.accent2) */ --orange: #4FC9B8; /* was aubergine #D2A9CC — secondary accent, now oasis teal (mobile hp.accent) */ --coral: #D98787; /* error (mobile hp.error) */ --yellow: #E0B368; /* warning (mobile hp.warning) */ --green: #7FB086; /* success (mobile hp.success) */ --mint: #7FB086; /* success tint, same as --green here */ --dark: #0F1D1B; /* page bg (mobile hp.bg) */ --bg: #16302C; /* raised surface (mobile hp.bgRaised) */ --card: #1C3A35; /* card surface (mobile hp.surface) */ --text: #EAF2EE; /* ink (mobile hp.ink) */ --muted: #A9BDB6; /* ink-soft (mobile hp.inkSoft) */ --border: #2A4A44; /* line (mobile hp.line) */ /* Extra semantic tokens pages can opt into directly (not required — existing pages keep working unchanged via the vars above). */ --hp-accent-ink: #C9F0E8; --hp-accent2-ink: #F3D89A; --hp-ink-faint: #6E8880; --hp-info: #7FA8C9; --hp-tertiary: #7FB086; /* palm green — life/health accent */ --hp-tertiary-ink: #C9E4CC; --hp-ai: #8C97D6; /* AI indigo — coach/insights, kept out of the gold family on purpose */ --hp-ai-ink: #D7DBF2; } /* Light-mode set — for pages built light by design (dashboard.html today). Same relationships as the dark set above, using the light-mode oasis teal/gold/stone values from the Oasis Wellness identity, not a simple inversion of the dark palette. */ .hp-light { --lime: #A97C2F; /* hospitality gold, light-mode value */ --orange: #1E7A6C; /* oasis teal, light-mode value */ --coral: #B23B3B; --yellow: #B8873A; --green: #4C8B5C; --mint: #4C8B5C; --dark: #1B2C29; /* used as a text/heading color on light pages, not page bg */ --bg: #F2EFE4; /* page bg (sand/limestone) */ --card: #FFFFFF; --text: #1B2C29; --muted: #55635D; --border: #DED7C4; --hp-accent-ink: #0F4A40; --hp-accent2-ink: #6B4E1E; --hp-ink-faint: #8B9690; --hp-info: #4E7FA6; --hp-tertiary: #4F7A55; --hp-tertiary-ink: #2F5A38; --hp-ai: #55628C; --hp-ai-ink: #333C63; } /* Editorial Calm mapped onto the legacy variable NAMES, same technique as the .hp-light block above (swap values, keep selectors pages already use). This lets a page opt into Editorial Calm by only changing its root class to "hp-editorial" — zero markup/CSS changes needed in the page itself. Values are the *Ink variants from theme.generated.css's .hp-editorial block, not the base tones — the legacy vars are used as both text AND background color throughout (no separate base/ink split existed in the old system), and the base tones fail WCAG contrast as text (see the web design doc's "Hard rule"). Scoped to only the names dashboard.html actually references. */ .hp-editorial { --lime: #4E6144; /* primary-ink (sage) — was hospitality gold */ --orange: #3F5D77; /* accent-ink (blue) — was oasis teal */ --coral: #93493D; /* error-ink */ --yellow: #82632A; /* warning-ink */ --green: #48633D; /* success-ink */ --mint: #6F9660; /* success (base) — lighter gradient partner for --green */ --dark: #2B2A25; /* ink — text/heading color */ --bg: #FAF7F2; /* page bg */ --text: #2B2A25; /* ink */ --muted: #6B695F; /* ink-soft */ --border: #EAE4D6; /* line */ --hp-accent-ink: #3F5D77; } .hp-font-display, .logo-text, h1, h2, .plans-title { font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif; } body, .hp-font-body { font-family: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif; } [lang="en"] body, [lang="en"] * { font-family: 'Readex Pro', 'IBM Plex Sans', sans-serif; }