/* variables.css - Midnight Teal Design Tokens 06 Nov 2026 v8 v8 - P-28 EMPATHY-THREAD, S3. One more kind colour, orchid, for In Step and everything about other people (Graeme, 05 Nov; proposal 7): #F0ABFC on dark, #A21CAF on light, #F5D0FE in high contrast. It sits between violet (stretching) and rose (classes) and is neither, and it always comes with the two-figures icon and the words In Step. 31 Oct 2026 v7 v7 - STAGE PATH Session 9 (close checks, axe; both tiers: a fault). --color-danger-text: rose as small text on its own tinted box. The player's "If it hurts" was #FB7185 on the rose-tinted card, 3.2:1 (13px needs 4.5). Dark #FDA4AF; light and high contrast keep their own usable rose. v6 - LOOK-3 COLOUR (Graeme, 04 Oct: "Both lack colour and seem unappealing"). Seven kind colours, one per kind of session, used the same way everywhere: Settings section tiles, the Progress session mix, lifts. Defined in all three schemes. As text only on the page and card ground (4.5:1); on raised surfaces only as shapes (3:1). A name or number always sits beside one, so colour is never the only cue (1.4.1). tools/verify-contrast-check.mjs v3. 05 Sep 2026 v5 v5 - SURFACE-TOKEN. --color-surface and --color-surface-2 defined in all three schemes. They were referenced 51 times across 15 files and defined nowhere; 33 of those uses had no fallback, so those surfaces rendered with no background at all. This is the SECOND instance of this exact fault -- see --color-bg-elevated below, August. Aliased to the card tier because that is what the code already meant: session-shared.css says so in prose, having used --color-bg-card deliberately and logged the mismatch. NOT aliased blindly. Eight uses in onboarding-thread.css were `color:`, not `background:` -- a background token doing a text job. Defining the token alone would have taken the onboarding chips from 13.01:1 to 1.41:1. Those eight are repointed to --color-text in the same change; tools/verify-surface.mjs now refuses a surface token used as a foreground colour. --color-surface-raised is left undefined ON PURPOSE: its single use supplies rgba(255,255,255,0.04), a translucent overlay that a solid alias would visibly change. Logged, not silently converted. v4 - SCHEME-1. Light and high-contrast schemes added as opt-in adaptations. Dark remains the default and the design intent; see the block at the foot of this file. 12 Aug 2026 v3 v3 - DISP-1, display preferences. Three user-controlled scales added, all defaulting to the exact current values so nothing changes for anyone who never opens the control. --user-text-scale multiplies every --text-* token --user-leading-scale multiplies every --leading-* token --user-letter-spacing inherited from :root, applied in display-preferences.css Scaling the TOKENS rather than setting body { font-size } is the whole reason this works. 514 font-size declarations in this codebase read a --text-* token and 129 hardcode a value; a body-level override reaches almost none of them, because components set size explicitly rather than inheriting. Multiplying the tokens reaches all 514 immediately. The remaining 129 are logged as DISP-2, not silently ignored. ALSO REMOVED IN v3: an @media (prefers-larger-text) block that had never matched anything. That is not a real media feature -- Media Queries Level 5 defines prefers-reduced-motion, prefers-contrast, prefers-color-scheme, prefers-reduced-data, forced-colors and prefers-reduced-transparency, and no text-size feature. The intent behind it was right and is now delivered by a control the person can actually reach. Tenth instance of P6: content that exists, is correct in spirit, and that nothing can ever select. 12 Aug 2026 v2 v2 - A11Y-1. --color-text-secondary and --color-text-muted lightened so they clear WCAG AA (4.5:1) on --color-bg-elevated, the lightest surface in the palette. The failure: 56 CSS rules set an elevated background and 15 of them put secondary or muted text directly on it. Secondary measured 4.30:1 and muted 3.91:1 -- both under the 4.5:1 floor for normal text. Because --color-bg-hover is the same value (#3E4C63), every card hover state was affected too. Fixed at the token rather than in 15 places, and by lightening the text rather than darkening the surface. Darkening --color-bg-elevated to make the old text pass would have brought it to 1.00:1 against --color-bg-card, so "elevated" would have become visually identical to "card" and every raised element in the app would have flattened. The cost, stated plainly: secondary and muted are now close enough to be nearly indistinguishable, so the palette effectively carries two text weights rather than three. That is the honest position anyway -- if a palette cannot support three weights on its own lightest surface at AA, it has two, and pretending otherwise is what produced 15 failing rules. Do not darken either token without re-running the numbers against #3E4C63, not just against #1E293B and #334155. */ :root { /* ======================================== COLOUR PALETTE: MIDNIGHT TEAL Matched to Alongside logo colours ======================================== */ /* Background layers (dark to light) */ --color-bg-deep: #0F172A; /* Deepest - app background */ --color-bg: #1E293B; /* Primary background */ --color-bg-card: #334155; /* Cards, elevated surfaces */ --color-bg-hover: #3E4C63; /* Hover states on cards */ --color-surface: #334155; /* SURFACE-TOKEN, 05 Sep 2026 - alias of bg-card */ --color-surface-2: #3E4C63; /* one step raised from surface */ --color-bg-elevated: #3E4C63; /* 04 Aug 2026 - was undefined, referenced 46+ times across 14 files with no fallback (confirmed via grep, not assumed) - meant every "elevated" surface app-wide was rendering with no background at all. Matched to --color-bg-hover's tier since the clearest real usage found (today.css settings link) uses it as hover feedback - same visual role. Kept as its own token, not an alias, so it can be differentiated later if a genuine distinct "elevated, not hover" surface is ever needed. */ /* Text */ --color-text: #E2E8F0; /* Primary text - off-white contrast: 11.87 on BG, 8.40 on BG_CARD */ --color-text-secondary: #B9C6D6; /* Secondary text contrast: 8.44 on BG, 5.97 on BG_CARD, 5.01 on BG_ELEVATED — was #A8B8CC (failed 4.30 on BG_ELEVATED) */ --color-text-muted: #B2C0D0; /* Muted text contrast: 7.90 on BG, 5.59 on BG_CARD, 4.69 on BG_ELEVATED — was #A0B0C0 (failed 3.91 on BG_ELEVATED) */ --color-text-inverse: #0F172A; /* Text on light/accent backgrounds */ /* Primary Accent - Electric Teal (matched to logo) */ --color-primary: #2DD4BF; /* Main accent - buttons, links */ --color-primary-light: #5EEAD4; /* Lighter variant */ --color-primary-dark: #2DD4BF; /* Hover/active — kept same as primary; #14B8A6 failed 4.16 on BG_CARD */ --color-primary-glow: rgba(45, 212, 191, 0.2); /* Glow effect */ /* Secondary Accent - Cyan */ --color-secondary: #22D3EE; /* Highlights, active states */ --color-secondary-light: #67E8F9; /* Semantic Colours */ --color-success: #34D399; /* Positive - emerald */ --color-success-light: rgba(52, 211, 153, 0.15); --color-warning: #FBBF24; /* Caution - amber */ --color-warning-light: rgba(251, 191, 36, 0.15); --color-danger: #FB7185; /* Alert - rose */ --color-danger-text: #FDA4AF; /* v7: rose as small text on a rose-tinted box */ --color-danger-light: rgba(251, 113, 133, 0.15); --color-info: #60A5FA; /* Info - blue */ --color-info-light: rgba(96, 165, 250, 0.15); /* Special */ --color-achievement: #A78BFA; /* Violet - milestones, credits */ --color-rest: #818CF8; /* Indigo - rest days */ /* LOOK-3. Kind colours (the same hues the app already uses for status). Contrast on dark: text on deep/bg 5.38-8.76, shapes on card/elevated 3.19-5.20. */ --kind-teal: #2DD4BF; /* your own sessions, the arc, You */ --kind-amber: #FBBF24; /* strength and the gym, Sessions */ --kind-violet: #A78BFA; /* mobility, yoga, stretches, Your data */ --kind-blue: #60A5FA; /* walking, running, cycling, swimming, Display */ --kind-rose: #FB7185; /* classes, Your body */ --kind-green: #34D399; /* breathing and mindful practice, Messages */ --kind-slate: #94A3B8; /* anything else, About, not yet */ --kind-orchid: #F0ABFC; /* In Step: other people (P-28) */ /* Energy/Mood Scale (10 levels) */ --color-scale-1: #FB7185; /* Low energy - rose */ --color-scale-2: #F87171; --color-scale-3: #FB923C; --color-scale-4: #FBBF24; --color-scale-5: #FACC15; /* Middle */ --color-scale-6: #A3E635; --color-scale-7: #4ADE80; --color-scale-8: #34D399; --color-scale-9: #2DD4BF; --color-scale-10: #22D3EE; /* High energy - cyan */ /* Borders */ --color-border: #475569; /* Default border */ --color-border-light: #334155; /* Subtle border */ --color-border-focus: #2DD4BF; /* Focus state */ /* Shadows - softer for dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px var(--color-primary-glow); /* ======================================== TYPOGRAPHY ======================================== */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* User-controlled scales (DISP-1). Defaults are exactly 1 / 1 / 0, so the rendered result is byte-identical for anyone who never touches the control. Set on :root by js/display-prefs.js and by the pre-paint script in index.html. */ --user-text-scale: 1; --user-leading-scale: 1; --user-letter-spacing: 0em; /* Font sizes — minimum xs 13px for readability on health app. Base values unchanged; each now multiplied by --user-text-scale. */ --text-xs: calc(0.8125rem * var(--user-text-scale)); /* 13px — was 12px */ --text-sm: calc(0.9375rem * var(--user-text-scale)); /* 15px — was 14px */ --text-base: calc(1rem * var(--user-text-scale)); /* 16px */ --text-lg: calc(1.125rem * var(--user-text-scale)); /* 18px */ --text-xl: calc(1.25rem * var(--user-text-scale)); /* 20px */ --text-2xl: calc(1.5rem * var(--user-text-scale)); /* 24px */ --text-3xl: calc(2rem * var(--user-text-scale)); /* 32px */ --text-4xl: calc(2.5rem * var(--user-text-scale)); /* 40px */ /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line heights. 83 declarations read these tokens; the 95 that hardcode a number are logged as DISP-2. */ --leading-tight: calc(1.2 * var(--user-leading-scale)); --leading-normal: calc(1.5 * var(--user-leading-scale)); --leading-relaxed: calc(1.7 * var(--user-leading-scale)); /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ======================================== SPACING ======================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 6rem; /* 96px */ /* ======================================== BORDERS & RADIUS ======================================== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ======================================== TRANSITIONS ======================================== */ --transition-fast: 100ms ease-out; --transition-normal: 200ms ease-out; --transition-slow: 300ms ease-out; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ======================================== LAYOUT ======================================== */ --nav-height: 72px; --header-height: 60px; --max-width: 480px; --content-padding: var(--space-5); /* ======================================== Z-INDEX LAYERS ======================================== */ --z-base: 1; --z-dropdown: 50; --z-nav: 100; --z-fab: 150; --z-modal: 200; --z-toast: 300; --z-tooltip: 400; } /* ======================================== ACCESSIBILITY ADJUSTMENTS ======================================== */ /* Larger text: REMOVED 12 Aug 2026 (DISP-1). An @media (prefers-larger-text) block stood here. That is not a real media feature and the block had never matched in any browser. The intent is now served by --user-text-scale above, driven by a control in Settings > Display that the person can actually reach. */ /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; --transition-spring: 0ms; } } /* ============================================================ DISPLAY SCHEMES (SCHEME-1, 12 Aug 2026) DARK IS AND REMAINS THE DEFAULT. Graeme, 12 Aug: "I must insist on dark mode default with the potential for adaptations by the user." Midnight Teal above is the product; everything below is an adaptation somebody has asked for, and nothing here applies unless they do. That is the inverse of the reference implementations Graeme supplied (DPC Hub, and BNH OS's [data-theme] block). Both are light-by-default with dark as the option, so their "dark theme" is this app's normal state. The LOGIC transferred -- a scheme class on the root, chosen in Settings, applied before first paint. None of the values did. WHY LIGHT EXISTS AT ALL. Light text on dark surfaces smears for people with astigmatism, and light sensitivity runs in both directions. This product is for neurodivergent adults, people navigating hormonal change, and people with chronic conditions and burnout -- an audience where display mode is functional rather than cosmetic. EVERY PAIRING MEASURED. Worst text or accent ratio in the light scheme is 4.68:1 (primary on the elevated surface); worst text ratio is 6.01:1. gated by tools/contrast-check.mjs, which runs all three schemes and exits 1 on any pairing below AA. Do not adjust a value here without re-running it. An earlier html.light-mode block was removed on 12 Aug (A11Y-2). It was unreachable -- no class was ever set -- and would not have worked if it had been, because six tokens were never overridden. This one overrides all of them, which is the whole difference. ============================================================ */ /* ── Light ───────────────────────────────────────────────────────── Layer order inverts: "deep" becomes the outermost page tone and "card" becomes white, so depth still reads as nearer-the-viewer rather than simply darker. */ :root.scheme-light { --color-bg-deep: #F1F5F9; --color-bg: #F8FAFC; --color-bg-card: #FFFFFF; --color-bg-hover: #E8EEF4; --color-bg-elevated: #E8EEF4; --color-surface: #FFFFFF; --color-surface-2: #E8EEF4; --color-text: #0F172A; /* 17.85 on card, 15.27 on elevated */ --color-text-secondary: #3D4C5F; /* 8.76 on card, 7.49 on elevated */ --color-text-muted: #4A5A70; /* 7.03 on card, 6.01 on elevated */ --color-text-inverse: #FFFFFF; /* Teal darkened for a light ground. #2DD4BF is 1.6:1 on white and would be effectively invisible; this reads as the same colour and measures 5.47 on card, 4.68 on elevated. */ --color-primary: #0F766E; --color-primary-dark: #0F766E; --color-primary-glow: rgba(15, 118, 110, 0.10); --color-border-focus: #0F766E; --color-success: #047857; --color-warning: #92400E; /* amber is unreadable on white; this is its usable form */ --color-danger: #9F1239; /* rose #FB7185 is ~2.6:1 on white; this is its usable form */ --color-danger-text: #9F1239; --color-danger-light: rgba(159, 18, 57, 0.10); --color-border: #64748B; /* 4.76 on card -- above the 3:1 needed for boundaries */ --color-border-light: #CBD5E1; /* LOOK-3. The bright kind colours are 1.7-2.7:1 on white; these are their usable forms (4.68-6.48 on every light surface). */ --kind-teal: #0F766E; --kind-amber: #92400E; --kind-violet: #6D28D9; --kind-blue: #1D4ED8; --kind-rose: #BE123C; --kind-green: #047857; --kind-slate: #475569; --kind-orchid: #A21CAF; } /* ── High contrast ───────────────────────────────────────────────── Was previously reachable ONLY via @media (prefers-contrast: high), i.e. only if somebody had already found their OS setting. The media query is kept below so that still works; this makes it choosable. */ :root.scheme-high-contrast { --color-bg-deep: #000000; --color-bg: #000000; --color-bg-card: #14202E; --color-bg-hover: #1E2C3D; --color-bg-elevated: #1E2C3D; --color-surface: #14202E; --color-surface-2: #1E2C3D; --color-text: #FFFFFF; --color-text-secondary: #F1F5F9; --color-text-muted: #E2E8F0; --color-primary: #5EEAD4; --color-primary-dark: #5EEAD4; --color-border-focus: #5EEAD4; --color-border: #CBD5E1; --color-border-light: #94A3B8; /* LOOK-3. One step lighter for maximum separation (7.49+ on black). */ --kind-teal: #5EEAD4; --kind-amber: #FCD34D; --kind-violet: #C4B5FD; --kind-blue: #93C5FD; --kind-rose: #FDA4AF; --kind-green: #6EE7B7; --kind-slate: #CBD5E1; --kind-orchid: #F5D0FE; } /* OS-level preference, unchanged. Someone who has set it system-wide still gets it without opening Settings. An explicit choice wins, because the class above is more specific than :root alone. */ @media (prefers-contrast: high) { :root { --color-text: #FFFFFF; --color-text-secondary: #E2E8F0; --color-border: #94A3B8; --color-primary: #5EEAD4; } }