/** * 100x Life Planning System - CSS Variables * * SOURCE OF TRUTH: docs/design-reference/extracted/runtime-core.css — the * token block extracted from the Claude Design prototype. Where this file and * that file disagree, that file wins. Tokens below that do NOT appear in the * reference are marked "app-only" and exist to serve app functionality the * prototype doesn't model (the Settings text-size control, legacy aliases the * not-yet-redesigned modules read). */ :root { /* ── Brand colors (reference verbatim) ────────────────────────────────── --teal-accent is #489CB8, the reference value. A previous pass changed it to #4a9bb5 to match CLAUDE.md's prose palette; the extracted prototype tokens are authoritative, so it is back to #489CB8. Call sites written as var(--teal-accent, #4a9bb5) are unaffected — a fallback only applies when the property is undefined. */ --teal-accent: #489CB8; --teal-dark: #3a8299; /* The pale wash. Lifted from the reference's #e8f4f8 by three units so that --teal-ink set ON it clears AA: teal-on-teal chips (guide dependency chips, the hub's "what you are working on", the map legend, plan chips) measured 4.33:1 on #e8f4f8 and 4.51:1 on this. The difference is not visible; the nine selectors that sit on it now pass. */ --teal-light: #f0f8fb; /* Teal that has to carry words. #489CB8 is 3.12:1 both as text on the page and as a fill under a white label, so the brand teal stays decorative — card edges, rings, borders, washes, the journey meter — and anything legible moves to these. (Owner decision, 2026-08-11, audit C2.) --teal-ink teal set as TEXT on a page background --teal-fill teal set BEHIND white text They are the same colour in light theme and diverge in dark, where the page is dark: ink has to get lighter to be read, a fill under white words has to stay dark. */ --teal-ink: #2F7A93; --teal-fill: #2F7A93; /* Hover/active for a --teal-fill button. --teal-dark (#3a8299) is now LIGHTER than the fill, so reusing it would have made buttons lift on hover instead of press. */ --teal-fill-hover: #24647A; --gold: #DF9A32; --gold-dark: #c4892a; --gold-light: #fdf6e8; --slate-blue: #83A9B2; /* App-only. Navy surfaces used by module screens the redesign has not reached yet (onboarding wizard, guide chrome, share modal). The app SHELL no longer reads these: header/footer use --surface-header/--surface-footer per the reference, where the header is #222222 charcoal, not navy. */ --brand-navy: #1a2b4a; --brand-navy-dark: #0f1a2e; /* Brand grays */ --black: #000000; --charcoal: #131313; /* Grays - extended palette */ --gray-100: #fcfcfc; --gray-200: #f7f7f7; --gray-300: #e0e0e0; --gray-400: #c0c0c0; --gray-500: #83A9B2; --gray-600: #606060; --gray-700: #353535; --gray-800: #131313; --gray-900: #000000; /* Background colors - Light theme */ --bg-primary: #ffffff; --bg-secondary: #f7f7f7; --bg-tertiary: #fcfcfc; /* Surfaces (reference). The header is charcoal #222222 — NOT brand navy. */ --surface-card: var(--bg-primary); --surface-page: var(--bg-secondary); --surface-header: #222222; --surface-footer: #0f1a2e; /* A dark chip you can set white words on: table headers, the action grid's row labels, the skip link, avatar initials. These used --navy-primary, which is a TEXT token and therefore inverts to #f7f7f7 in dark theme — white words on a near-white chip (audit's missing --brand-navy* dark override). A surface token stays a surface in both themes. */ --surface-inverse: #131313; /* Text colors. --text-secondary/--text-muted are the brand's slate blue rather than a gray, a 100x Forum choice carried from the original app. The hue is kept; the value is not. #83A9B2 measured 2.37:1 on the page and 2.54:1 on white across 717 declarations — the single biggest contrast failure in the 2026-08-11 audit, and the colour most of the app's secondary copy is set in. #4A6F7A is the same slate, dark enough to read: 6.0:1 on white, 5.6:1 on the #f7f7f7 page. (Owner decision, 2026-08-11.) */ --text-dark: #131313; --text-secondary: #4A6F7A; --text-muted: #4A6F7A; --text-light: #ffffff; --text-body: var(--text-dark); --text-heading: var(--navy-primary); --text-on-accent: #ffffff; /* ── CliftonStrengths domain marks (app-only) ─────────────────────────── The four domains a member's themes fall into: Executing, Influencing, Relationship Building, Strategic Thinking. Colour is REINFORCEMENT here — every domain is also named in words next to its mark — so these are only ever drawn as rules and dots, never set as text, and none of them has to carry contrast on its own. Two are the brand's own hues; the other two are the instrument's purple and green pulled toward this palette's temperature, so a member recognises their report without the form turning into one. */ --domain-executing: #7A5A86; --domain-influencing: var(--gold-dark); --domain-relationship: var(--teal-ink); --domain-strategic: #4E7A5E; /* Borders */ --border-light: #e0e0e0; --border-medium: #83A9B2; /* --border-color: referenced by ~100 declarations across modules/*.css, components.css and components/parking-lot.css (mostly without a fallback, e.g. `border: 1px solid var(--border-color)`), but was never defined here. An undefined custom property with no fallback makes the whole declaration invalid at computed-value time, so every one of those borders was silently not rendering. Aliasing it to --border-light (the token those call sites clearly meant) fixes all of them from one place. */ --border-color: var(--border-light); /* Softer hairline the prototype uses for bordered controls sitting on light surfaces, so they don't read as slate-blue lines. */ --border-soft: #b9c6cb; /* Status colors (reference) */ --status-danger: #dc3545; --status-warning: #f59e0b; --status-warning-deep: #b45309; --status-warning-bg: #fef3c7; --status-success: var(--teal-accent); /* Legacy mappings for compatibility. These names are claimed by near-black text/UI values carried over verbatim from the original Firebase app and read by ~175 call sites; the reference defines them the same way. */ --navy-primary: #131313; --navy-dark: #000000; --navy-medium: #353535; --navy-light: #83A9B2; --navy-darkest: #000000; --cream: #f7f7f7; --cream-dark: #e0e0e0; /* ── Typography (reference verbatim) ────────────────────────────────────*/ --font-heading: 'Frank Ruhl Libre', Georgia, serif; --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-ui: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Named type scale. Every one of these is calc(px + var(--text-bump)) — --text-bump is defined in the responsive block at the bottom of this file (it was previously used by ~500 declarations across the app but never defined anywhere, which made every one of those font-size declarations invalid at computed-value time and therefore silently dropped). */ --size-h1: calc(48px + var(--text-bump)); --size-h2: calc(32px + var(--text-bump)); --size-h3: calc(26px + var(--text-bump)); --size-h4: calc(24px + var(--text-bump)); --size-h5: calc(20px + var(--text-bump)); --size-h6: calc(18px + var(--text-bump)); --size-lead: calc(20px + var(--text-bump)); --size-body: calc(18px + var(--text-bump)); --size-sm: calc(15px + var(--text-bump)); --size-xs: calc(13px + var(--text-bump)); --size-ui: calc(14px + var(--text-bump)); --size-ui-sm: calc(13px + var(--text-bump)); --size-eyebrow: calc(0.8rem + var(--text-bump)); --weight-heading: 500; --weight-semibold: 600; --weight-body: 400; --leading-tight: 1.2; --leading-ui: 1.5; --leading-prose: 1.7; --tracking-ui: 0.5px; --tracking-eyebrow: 0.12em; --tracking-label: 0.1em; /* App-only: the Settings -> Account text-size control (Default/Larger/ Largest). The prototype has no such control; it scales type per breakpoint via --text-bump alone. --text-scale is a multiplier driving the --type-* tokens below, which the redesigned shell and Hub read. Kept because the control is real, shipped functionality. */ --text-scale: 1; --type-display: calc(1.75rem * var(--text-scale)); /* page/section titles */ --type-body: calc(1rem * var(--text-scale)); /* body copy, controls */ --type-small: calc(0.8125rem * var(--text-scale)); /* captions, meta, pills */ /* ── Spacing and widths (reference verbatim) ────────────────────────────*/ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --width-app: 1400px; --width-hub: 1200px; --width-form: 820px; --width-prose: 800px; --width-modal: 500px; --width-modal-lg: 800px; /* ── Radii (reference verbatim) ───────────────────────────────────────── 100x Forum uses sharp corners by default; the documented exceptions are their own named tokens. --radius-panel is 8px in the reference (it was 12px here); the reference's 12px value is --radius-panel-lg. */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 50rem; --radius-control: 6px; --radius-panel: 8px; --radius-panel-lg: 12px; /* App-only alias: pill-shaped tabs/badges. Same value as --radius-full. */ --radius-pill: var(--radius-full); /* ── Shadows (the elevation scale) ─────────────────────────────────────── Exactly three elevations (motion & polish spec, 2026-08-11): sm for cards at rest, md for raised/hovered surfaces and dropdowns, lg for overlays (modals, popovers, trays). The audit counted 82 distinct box-shadow values across 226 declarations; everything converges here. --shadow-panel/ --shadow-dropdown/--shadow-modal survive as ALIASES for existing call sites — same three values, older names. Each elevation is a STACK, not one blur (2026-08-17). A single drop shadow reads as a sticker: real objects cast a hairline where they meet the surface, a tight contact shadow, and a wide soft ambient all at once. So every opacity here is tiny (2–8%) and depth comes from the overlap. The 0.5px ring is a light edge, not a border — replacing 1px strokes with it is the biggest single tell of a hand-made UI. Call sites are unchanged: they already all read these three tokens. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.02), 0 0 0 0.5px rgba(0,0,0,0.08); --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.08); --shadow-lg: 0 4px 8px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.10); --shadow-panel: var(--shadow-md); --shadow-dropdown: var(--shadow-md); --shadow-modal: var(--shadow-lg); /* ── Motion (2026-08-11 motion & polish spec, binding) ─────────────────── Three durations, two curves, used everywhere; no ad-hoc values. quick hover, focus, small state flips enter elements entering/leaving — drawers, cards, panels ceremony progress moments, used sparingly The global prefers-reduced-motion block lives in base.css and collapses all of it at once. */ --motion-quick: 150ms; --motion-enter: 250ms; --motion-ceremony: 400ms; /* The curves (retuned 2026-08-17). The browser's own `ease` and `ease-in-out` are banned: they are the flattest, most generic movement available and every UI that ships them looks the same. These start fast and settle long, which is what reads as deliberate rather than animated. smooth the house default — almost everything out decorative entrances, a touch more decisive at the start spring overshoot, for things that POP in: badges, counts, pills. Never use it on anything that moves a large surface. in-out symmetric moves that leave and arrive on screen */ --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.17, 1, 0.32, 1); --ease-spring: cubic-bezier(0.35, 1.55, 0.65, 1); --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1); /* Hover-intent threshold — a wait, not a movement, so it is not one of the three motion tiers. The journey rail's chapter popovers (and anything macOS-dock-deferred like them) open after this pause; the spec names that idiom part of the house feel. */ --hover-intent: 180ms; /* Legacy transition shorthands, remapped onto the motion tokens so their ~100 existing call sites ride the same physics — now on --ease-smooth, which is why retuning one line above changes the feel of the whole app. */ --transition-fast: var(--motion-quick) var(--ease-smooth); --transition-normal: var(--motion-enter) var(--ease-smooth); --transition-slow: var(--motion-ceremony) var(--ease-in-out); /* ── The focus ring ────────────────────────────────────────────────── ONE ring, defined here and drawn once in base.css on :focus-visible. Before 2026-08-11 there were 109 `outline: none` overrides across 32 files, a dozen hand-rolled focus shadows in two different teals, and a handful of rules that stood in a 1.06:1 background change for a ring — which is to say, on most of the app, a keyboard user could not see where they were. Nothing overrides these; change the ring here. The colour is the current teal accent. When the ink tokens are settled (audit C1/C2) this is the one line that moves. */ --focus-ring-color: var(--teal-accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring: 0 0 0 3px rgba(74, 155, 181, 0.3); /* App-only alias of --focus-ring under this file's older name. */ --shadow-focus: var(--focus-ring); --overlay-scrim: rgba(0, 0, 0, 0.5); /* The brand topography texture. app/assets/images/topography-teal.svg is byte-identical to docs/design-reference/extracted/topography.svg. */ --texture-topography: url("/assets/topography-teal-7429a986.svg"); } /* ── Responsive density scale (reference verbatim) ──────────────────────── --text-bump is a flat px addition every --size-* token (and ~500 hand-written calc() font sizes across the app) is built on. --pad-x / --card-x are the page and card horizontal gutters; --tap is the minimum hit target, which grows on touch and small screens. */ :root { --text-bump: 3px; --ui-zoom: 1; --pad-x: 2rem; --card-x: 1.9rem; --tap: 38px; } @media (max-width: 1024px) { :root { --text-bump: 2.5px; --ui-zoom: 1; --pad-x: 1.5rem; --card-x: 1.5rem; --tap: 44px; } } @media (max-width: 600px) { :root { --text-bump: 2px; --pad-x: 0.75rem; --card-x: 1rem; --tap: 44px; } } @media (pointer: coarse) { :root { --tap: 44px; } } @media (min-width: 1450px) { :root { --text-bump: 3.5px; --ui-zoom: 1.08; } } @media (min-width: 1700px) { :root { --text-bump: 4px; --ui-zoom: 1.16; } } @media (min-width: 2000px) { :root { --text-bump: 4.5px; --ui-zoom: 1.24; } } @media (min-width: 2400px) { :root { --text-bump: 5px; --ui-zoom: 1.34; } } /* Text size (Settings -> Account -> "Larger"/"Largest") — app-only, drives --text-scale, the multiplier the --type-* tokens are built from. Separate mechanism from --text-bump: an additive px bump and a multiplier don't compose cleanly on the same declaration. */ [data-text-size="larger"] { --text-scale: 1.125; } [data-text-size="largest"] { --text-scale: 1.25; } /* ── Dark theme (reference verbatim) ──────────────────────────────────────*/ [data-theme="dark"] { /* Tell the browser this subtree is dark so NATIVE widgets follow: the file input's "Choose File" chip, date-picker fields/icons, scrollbars. Without it they render in UA light style — a white "Choose File" chip glowing on the Strengths Deep Dive upload band (2026-08-13 dark-mode audit). */ color-scheme: dark; /* Brand colors adjusted for dark backgrounds */ --teal-accent: #5bb8d4; --teal-dark: #489CB8; --teal-light: #1a3a4a; /* The two halves of the teal split go opposite ways on a dark page: teal TEXT has to lighten to be read (#5bb8d4 is 6.4:1 on #242424), while a fill with a white label on it has to stay dark — the audit measured white on #5bb8d4 at 2.27:1, worse than light theme. */ --teal-ink: #5bb8d4; --teal-fill: #2F7A93; --gold: #e8a83a; --gold-dark: #DF9A32; --gold-light: #2a2515; --slate-blue: #9fc4cc; /* Grays inverted for dark theme */ --gray-100: #131313; --gray-200: #1a1a1a; --gray-300: #2a2a2a; --gray-400: #454545; --gray-500: #9fc4cc; --gray-600: #c0c0c0; --gray-700: #e0e0e0; --gray-800: #f7f7f7; --gray-900: #fcfcfc; /* Background colors - Dark theme */ --bg-primary: #242424; --bg-secondary: #1a1a1a; --bg-tertiary: #2e2e2e; /* Text colors - inverted for dark */ --text-dark: #f7f7f7; --text-secondary: #9fc4cc; --text-muted: #9fc4cc; --text-light: #131313; /* The two domain marks that aren't brand hues have to lift off a dark page; the other two follow --gold-dark and --teal-ink, which already do. */ --domain-executing: #B69AC0; --domain-strategic: #86B394; /* Borders */ --border-light: #383838; --border-medium: #505050; /* Legacy mappings */ --navy-primary: #f7f7f7; --navy-dark: #fcfcfc; --navy-medium: #e0e0e0; --navy-light: #9fc4cc; --navy-darkest: #f7f7f7; --cream: #131313; --cream-dark: #2a2a2a; /* Shadows — the same layered stacks, re-weighted for a dark page. Drop shadows do less work here (dark on dark), so the depth comes mostly from the hairline ring, which goes light instead of dark: on a dark surface an edge is defined by the light catching it, not by a darker line. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06); --shadow-md: 0 2px 4px rgba(0,0,0,0.30), 0 4px 10px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.30), 0 0 0 0.5px rgba(255,255,255,0.08); --shadow-lg: 0 4px 8px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.10); /* The header goes navy in dark theme (reference). */ --surface-header: #0f1a2e; /* Dark values the theme was missing entirely (audit, 2026-08-11): without these, five tokens kept their light-theme colours on a dark page. The status colours were the visible ones — amber-on-cream warning text sitting on a near-black card. */ --status-danger: #f07178; --status-warning: #f0b429; --status-warning-deep: #f7d070; --status-warning-bg: #3a2c0a; --status-success: var(--teal-accent); --surface-footer: #0f1a2e; --surface-inverse: #2e2e2e; /* The scrim has to be heavier over a dark page: the light-theme 50% black left the page behind a modal clearly legible through it. */ --overlay-scrim: rgba(0, 0, 0, 0.72); /* App-only aliases that must follow the dark values above. */ --focus-ring: 0 0 0 3px rgba(91, 184, 212, 0.45); --shadow-focus: var(--focus-ring); }