/* ═══════════════════════════════════════════════════════════ BEING ME - DESIGN TOKENS being-me-theme.css v7 (Tideline, rollout step T5: component and type tokens; T7 changed comments only, no token) Linked FIRST in , before the page's own Order matters in one direction only. This file DEFINES tokens; page CSS and being-me-responsive.css CONSUME them. Nothing here sets a property on a selector, so it cannot override page CSS and does not need !important anywhere. It only has to be parsed before the first var() is resolved, which "first in head" guarantees. ── v4: TIDELINE (17 October 2026) ────────────────────────── The gold and near-black look is replaced by Tideline: deep sea, warm white and one rose moment. Decided on the Tideline canvas; rules and rollout in the Phase 5 brand system doc. T1 changes VALUES ONLY. Every token name from v3 is kept, so no page body is edited. Same rule Deploy 1a followed: if a page looks wrong after T1, the token swap is the only thing it can be. - Gold is gone, but --gold keeps its name. It now carries the accent: deep sea #1e4a47 in light, sea light #8fc1b8 in dark. It is used about 245 times as text (links, active states, the member's quoted words), and that job is unchanged. Renaming it is page-body work for a later step. - --gold-fill2 and --gold-fill3 take the same value as --gold-fill. Every v3 gold gradient now renders as one flat colour, without editing a page body. - The fill tokens are now set per mode. In v3 one gold fill worked on both backgrounds; the dark accent here is light and carries dark text, the light accent is dark and carries warm white. - New: --moment (rose in light, shell in dark) and --mist. - The eight life-area colours approved 17 October 2026. - Radii up a step: 16 / 12 / 28. - Contrast debt cleared. v3 dark --text3 was 2.6:1 and --text4 1.5:1 against the page; both now clear AA on the ground. ── v5: ONE TYPEFACE (T2, 18 October 2026) ───────────────── Instrument Sans everywhere, replacing Playfair Display, Cormorant Garamond and DM Sans. It is hosted here, not by Google Fonts: assets/fonts/ holds the variable font (weights 400-700, Latin and Latin Extended, about 41 KB) and its SIL Open Font Licence. Self-hosted so app pages make no request to Google ("private by architecture") and so text does not wait on a third-party connection. Declared once, below, so every page that links this file has it; pages preload the Latin file. --serif, --quote and --sans keep their names (page bodies use them) and now all name Instrument Sans. There is no italic face: italics were removed in T2 (Phase 5: at most one italic on any screen, none in the boards). Weights above 700 show as 700 until T5 sets the type scale. DELIBERATELY NOT IN T1 - Hardcoded gold written into page bodies (faint washes) and the share tile: step T5. The landing page: T3. REACH's dark palette: T7. ── DEFAULT THEME ────────────────────────────────────────── Warm white (light) for new members, decided 17 October 2026. That lives in being-me-theme.js, the account page fallback and the bm_preferences column default (bm-c29), not here. Dark is still on bare :root and light on [data-theme="light"]: the runtime always sets data-theme, so which block is "bare" no longer decides what a new member sees. ── PAGES DELIBERATELY EXCLUDED ───────────────────────────── These keep their own :root and must NOT be converted. They are not oversights: (being-me-landing.html joined this file in T3.) privacy-v1.0.html ... Frozen archives of superseded privacy-v1.4.html policies. A record of what people agreed to, noindexed. They do not follow the live theme. ── NO PAGE HAS ITS OWN PALETTE (T7, 19 October 2026) ───── REACH kept the v3 gold and near-black in dark until T7; it now follows light and Ink like every page, its five letters share the accent and the current step is marked with the --moment point. The landing and sign-in pages have dark mode too: they carry data-bm-visitor, so they follow the visitor's phone (see being-me-theme.js). verify-theme.js T3, T15 and T16 hold this. Not in production, so out of scope entirely: being-me-test.html being-me-app-preview_4.html being-me-ai-coaching-prompt_1.html verify-theme.js asserts the exclusions as hard as it asserts the conversions, and pins the Tideline values (T10), so a later pass cannot quietly drift them. ═══════════════════════════════════════════════════════════ */ /* ── INSTRUMENT SANS (T2) ──────────────────────────────────── Variable weight 400-700, upright only. Paths are relative to this file, which sits at the site root. font-display: swap shows text at once in the fallback and swaps when the font arrives; the Latin file is preloaded by every page, so the swap is rare. Files from @fontsource-variable/instrument-sans 5.3.0 (OFL 1.1). */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('assets/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('assets/fonts/instrument-sans-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ── DARK: NIGHT SEA ───────────────────────────────────────── Contrast figures are against --bg in this mode, and are recomputed by verify-theme.js on every run (T8). */ :root { color-scheme: dark; /* ── SURFACES ──────────────────────────────────────────── The ramp runs progressively LIGHTER as the number rises, and lighter reads as nearer the viewer. --bg4 is the hover surface; --bg5 is scrollbar thumbs and pressed states. */ /* T4 (18 Oct 2026): "Ink". Dark mode was night sea on every surface, so cards (1.12:1) and the nav (1.34:1) disappeared into the ground. Rowan chose option A: near-neutral surfaces, green only where it means something - the deep-sea nav pill, the accent, progress. The same app as light, lights off. */ --bg: #131515; /* ink, page ground */ --bg2: #1f2322; /* cards, sheets */ --bg3: #2a2f2e; /* the band, raised */ --bg4: #313735; /* hover */ --bg5: #3a403e; /* pressed, scrollbar thumb */ --bg6: #444a48; /* ── BORDERS ───────────────────────────────────────────── Warm white at very low alpha rather than a solid colour, so the same border reads as the same weight on every surface. */ --border: rgba(242,238,231,0.07); --border2: rgba(242,238,231,0.13); --border3: rgba(242,238,231,0.22); /* ── TEXT ──────────────────────────────────────────────── */ --text: #f2eee7; /* 15.8:1 */ --text2: #b6bab8; /* 9.3:1 */ --text3: #a1a6a3; /* 7.4:1 */ --text4: #959a97; /* 6.3:1 on the ground; 4.8:1 on the band */ /* ── ACCENT (named --gold since v1, carries sea light) ──── */ --gold: #8fc1b8; /* sea light, 9.2:1 */ --gold2: #a9d3cb; /* hover, 11.2:1 */ --gold3: #6fa39a; /* quieter, 6.4:1; 4.8:1 on the band */ /* Accent washes: dim fill, border, and stronger border. */ --gd: rgba(143,193,184,0.10); --gb: rgba(143,193,184,0.22); --gbr: rgba(143,193,184,0.38); /* ── MOMENT AND MIST (new in v4) ───────────────────────── --moment is the one rose moment: the horizon, the point, a done date. Never a button and never a fill bigger than the point. On deep sea use shell, never rose - which is why the dark value is shell. --mist is tints, avatars and the member's chat bubble. */ --moment: #e8a79e; /* shell, 9.1:1 */ --mist: #2a2f2e; /* ── LIFE AREAS (approved 17 October 2026) ─────────────── Dots and 3px tags only, always beside the area's name. Never on Today or in My Coach, and progress is never coloured by area. A goal must be the same colour on every surface. */ --relationships: #e4b290; --financial: #d0bc86; --culture: #b3c792; --physical: #97cda9; --career: #8bc7e5; --community: #a4beef; --wellbeing: #beb6eb; --intellectual: #d5aedb; /* ── STATUS ────────────────────────────────────────────── Error and success messages only. Kept as colour names rather than roles because that is what the pages call them. */ --green: #97cda9; --red: #ff9e94; --blue: #8bc7e5; /* ── RADII ─────────────────────────────────────────────── --r cards, chat bubbles --r2 inputs, small cards --r3 photos, large panels and modals Buttons and the nav are fully round in the page CSS. */ --r: 16px; --r2: 12px; --r3: 28px; /* ── TYPEFACE (T2) ─────────────────────────────────────── One family under three names, so no page body had to change which token it reads. See the header. */ --serif: 'Instrument Sans', system-ui, -apple-system, sans-serif; --quote: 'Instrument Sans', system-ui, -apple-system, sans-serif; --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif; } /* ── LIGHT: WARM WHITE ─────────────────────────────────────── The default for new members. The surface ramp INVERTS in the middle, as in v3: cards lift to white, while the band and hover go darker than the page, because on paper hover is darker. */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f4ef; /* warm white, page ground */ --bg2: #ffffff; /* cards, sheets */ --bg3: #ece6dc; /* the band */ --bg4: #e3dcd0; /* hover */ --bg5: #d8d0c2; --bg6: #c9c0b0; --border: rgba(23,25,26,0.08); --border2: rgba(23,25,26,0.14); --border3: rgba(23,25,26,0.24); --text: #17191a; /* 16.1:1 */ --text2: #5a5f5c; /* 5.9:1 */ --text3: #62675f; /* 5.3:1 */ --text4: #676b66; /* 4.9:1 on the ground; 4.4:1 on the band */ /* Deep sea. --gold3 collapses to --gold for the reason it did in v3: anything dimmer than the accent drops below AA as text on paper. */ --gold: #1e4a47; /* deep sea, 9.0:1 */ --gold2: #163735; /* hover */ --gold3: #1e4a47; --gd: rgba(30,74,71,0.07); --gb: rgba(30,74,71,0.16); --gbr: rgba(30,74,71,0.30); /* Rose, 5.1:1 on the ground. Never as text on the band, where it is 4.47:1 and fails AA. */ --moment: #a84a57; --mist: #d5e3df; --relationships: #885531; --financial: #766122; --culture: #586c33; --physical: #36714e; --career: #236c8a; --community: #486394; --wellbeing: #645a90; --intellectual: #7a5280; --green: #36714e; --red: #b3261e; --blue: #236c8a; } /* ═══════════════════════════════════════════════════════════ ACCENT AS FILL Buttons, the coach tab ring, filled step circles. The ~90 fill declarations were pointed at these in Deploy 2; this file is the only place their values live. Per mode in v4: deep sea carrying warm white in light, sea light carrying night sea in dark. Three fill names, one value. Gold appeared in gradients - linear-gradient(135deg, var(--gold-fill), var(--gold-fill3)) and similar - and giving all three the same value turns every one of them flat without touching a page body. Tideline has no gradients. verify-theme.js T10 holds the three equal. being-me-responsive.css uses them for the mobile coach button. ═══════════════════════════════════════════════════════════ */ :root { --gold-fill: #8fc1b8; --gold-fill2: #8fc1b8; --gold-fill3: #8fc1b8; --on-gold: #0f2321; /* 8.2:1 */ } :root[data-theme="light"] { --gold-fill: #1e4a47; --gold-fill2: #1e4a47; --gold-fill3: #1e4a47; --on-gold: #f7f4ef; /* 9.0:1 */ } /* NAVIGATION (T4, 18 Oct 2026). The phone tab bar is a solid pill (glass waits for the native app); the second row for My Self and Goals sits above it in a lighter "mid" green. ONE look in both modes: with the Ink dark mode the deep-sea pill is the one green thing on a dark screen, exactly as it is on warm white. --nav-bg the pill --nav-row the second row --nav-on active label --nav-off other labels (pill) --nav-row-off other labels (row) --nav-point the active point Contrast, active / other label on its fill: 9.0 / 6.6 (pill), 5.8 / 4.8 (row). The point is a mark, not text: 4.9 and 3.1, over the 3:1 floor. */ :root { --nav-bg: #1e4a47; --nav-row: #3d6763; --nav-on: #f7f4ef; --nav-off: #c9d6d2; --nav-row-off: #d5e3df; --nav-point: #e8a79e; } /* Text sitting on a LIFE AREA colour - avatars, chips, dots that take their background from the member's goal area at runtime. It flips: the dark-mode area colours are light and want night sea text, the light-mode ones are dark and want white. */ :root { --on-area: #0f2321; } :root[data-theme="light"]{ --on-area: #ffffff; } /* ═══════════════════════════════════════════════════════════ DEPRECATED ALIASES (unchanged from v3) The same roles under older names, still referenced in page bodies. Each points at its canonical token rather than repeating a hex value, so they cannot drift, and they follow the mode automatically. verify-theme.js reports which pages still use each one, so they can be removed a page at a time. ═══════════════════════════════════════════════════════════ */ :root { /* was on being-me-checkin_1_3.html */ --gc: var(--gbr); /* was on being-me-learning.html and being-me-values-why.html */ --health: var(--physical); --personal: var(--intellectual); } /* ═══════════════════════════════════════════════════════════ COMPONENTS AND TYPE (T5, 18 October 2026) One button set and one type scale for every page. The values live here; the rules that apply them live in being-me-responsive.css (the shared layer, linked last), because this file only defines tokens. BUTTONS. Fully rounded pills, the shape of the landing page's waitlist button and the nav. Three kinds: primary the accent fill with --on-gold text. One per view. secondary an outline in the accent; also every My Coach action ("Expand with My Coach", with the speech-bubble mark). quiet underlined accent text, for skip and dismiss. Rose is never a button. The bug this closes: after T4 the My Self "Continue" button showed near-black text on the deep-sea fill, because the page wrote #0d0d0f itself instead of using --on-gold. Twelve rules on four pages did the same. tests/verify-contrast.py now measures every control on every page, light and Ink. TYPE. Instrument Sans at six sizes, headings at weight 600 (decided 18 October: "go with recommendations"). display 34 / 40 page titles title 24 / 30 section titles heading 19 / 26 card and group headings body 16 / 24 small 14 / 20 caption 13 / 18 dates, labels, credits VISION BOARD TILES. Four colours for words on a board, the same in both modes because a board is a picture that leaves the app: deep sea, rose, sand and mist. Each carries its own text colour, all at 5:1 or better. Rose is the moment: one rose tile per collection. ═══════════════════════════════════════════════════════════ */ :root { --btn-r: 999px; --btn-primary-bg: var(--gold-fill); --btn-primary-fg: var(--on-gold); --btn-line: var(--gold); --fs-display: 34px; --lh-display: 40px; --fs-title: 24px; --lh-title: 30px; --fs-heading: 19px; --lh-heading: 26px; --fs-body: 16px; --lh-body: 24px; --fs-small: 14px; --lh-small: 20px; --fs-caption: 13px; --lh-caption: 18px; --fw-head: 600; --tile-sea: #1e4a47; --on-tile-sea: #f7f4ef; /* 9.0:1 */ --tile-rose: #a84a57; --on-tile-rose: #f7f4ef; /* 5.1:1 */ --tile-sand: #ece6dc; --on-tile-sand: #17191a; /* 14.6:1 */ --tile-mist: #d5e3df; --on-tile-mist: #1e4a47; /* 7.5:1 */ }