/* ========================================================================== ThisHome design tokens v2 -------------------------------------------------------------------------- Loaded before styles.css on every page. This file is the single source of truth for colour, radius, shadow and type on the web; mobile/src/ui/theme.ts mirrors it key for key. Section 1 v2 tokens (--th-*). New code consumes these. Section 2 Legacy aliases. Every custom property that styles.css consumed before v2 keeps resolving, now to a v2 value. Consumers were not edited; the values shifted under them. Section 3 Browser surfaces and the colour-scheme declaration. ========================================================================== */ /* -------------------------------------------------------------------------- 1. v2 tokens Three signal roles only: fit (a home matches), pass (it does not), love (the buyer's strongest positive). Everything else is ink on paper. -------------------------------------------------------------------------- */ :root { /* Ink: text and primary actions. One navy, three strengths. */ --th-ink: #14212b; --th-ink-2: #55606a; --th-ink-3: #8b949c; --th-ink-strong: #0b141b; --th-ink-soft: rgba(20, 33, 43, 0.06); /* Paper: page and muted surfaces. Card: elevated content. */ --th-paper: #f7f4ee; --th-paper-2: #efebe3; --th-paper-3: #e5e0d6; --th-card: #fffdf9; /* Hairlines, always ink-tinted, never grey. */ --th-line: rgba(20, 33, 43, 0.12); --th-line-strong: rgba(20, 33, 43, 0.22); /* Signal roles. */ --th-fit: #1f6f5b; --th-fit-strong: #175547; --th-fit-soft: rgba(31, 111, 91, 0.1); --th-pass: #b0503d; --th-pass-strong: #8a3d2e; --th-pass-soft: rgba(176, 80, 61, 0.1); --th-love: #c39a45; --th-love-strong: #7d5c18; --th-love-soft: rgba(195, 154, 69, 0.12); /* Radius. Tightened 2-4px from v1 so cards read as objects, not pillows. */ --th-radius-xl: 24px; --th-radius-lg: 18px; --th-radius-md: 14px; --th-radius-sm: 10px; --th-radius-card: 18px; --th-radius-pill: 999px; /* Shadow. Ink-tinted, lower opacity, shorter throw than v1. */ --th-shadow-1: 0 6px 16px rgba(20, 33, 43, 0.05); --th-shadow-2: 0 12px 28px rgba(20, 33, 43, 0.07); --th-shadow-3: 0 20px 44px rgba(20, 33, 43, 0.09); /* Type. Fraunces for display and price, Manrope for everything else. */ --th-font-display: "Fraunces", Georgia, "Times New Roman", serif; --th-font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --th-type-title: 500 28px/1.08 var(--th-font-display); --th-type-price: 500 25px/1.08 var(--th-font-display); --th-type-body: 400 16px/1.45 var(--th-font-ui); --th-type-label: 600 13px/1.3 var(--th-font-ui); --th-type-micro: 600 11px/1.3 var(--th-font-ui); /* Tap targets (px). Deck side buttons and the primary Save. */ --th-target-min: 44px; --th-target-deck-side: 56px; --th-target-deck-primary: 68px; --th-max-width: 1260px; } /* -------------------------------------------------------------------------- 2. Legacy aliases Names styles.css consumed before v2. Do not add consumers of these names; they exist so v1 selectors keep resolving until each is migrated. -------------------------------------------------------------------------- */ :root { /* Surfaces. --page-bg was a layered gradient; v2 is flat paper. */ --page-bg: var(--th-paper); --surface: var(--th-card); --surface-strong: var(--th-card); --surface-muted: var(--th-paper-2); --surface-soft: var(--th-paper-3); /* Consumed via background-image, which rejects a flat colour, so this stays a gradient: an ink wash from 2% to 6%. */ --surface-premium: linear-gradient(180deg, rgba(20, 33, 43, 0.02), rgba(20, 33, 43, 0.06)); --border: var(--th-line); --border-strong: var(--th-line-strong); --text: var(--th-ink); --muted: var(--th-ink-2); /* Navy accent family collapses onto ink. */ --accent: var(--th-ink); --accent-strong: var(--th-ink-strong); --accent-soft: var(--th-ink-soft); /* Decision colours. Save was deep teal; Save is now an ink action. */ --pass: var(--th-pass); --save: var(--th-ink); --super: var(--th-love); --super-strong: var(--th-love-strong); /* Teal, sage and the Life Fit composite were all "this fits" signals. Sage lands on the darker fit step so the Work/Daycare destination chips and the sage-to-teal progress gradient stay distinguishable. */ --teal: var(--th-fit); --teal-soft: var(--th-fit-soft); --teal-strong: var(--th-ink); --sage: var(--th-fit-strong); --sage-soft: var(--th-fit-soft); /* Coral was the negative / heart family; it is the pass role now. */ --coral: var(--th-pass); --coral-soft: var(--th-pass-soft); /* Sky was informational blue; informational is secondary ink. */ --sky: var(--th-ink-2); --sky-soft: var(--th-ink-soft); --shadow-lg: var(--th-shadow-3); --shadow-md: var(--th-shadow-2); --shadow-sm: var(--th-shadow-1); --shadow-soft: var(--th-shadow-2); --radius-xl: var(--th-radius-xl); --radius-lg: var(--th-radius-lg); --radius-md: var(--th-radius-md); --radius-sm: var(--th-radius-sm); --max-width: var(--th-max-width); /* Names styles.css consumed with no v1 definition anywhere (they resolved through inline fallbacks, or inherited where no fallback was given). */ --ink: var(--th-ink); --ink-muted: var(--th-ink-2); --strong: var(--th-ink); --color-text: var(--th-ink); --color-text-strong: var(--th-ink); --color-text-muted: var(--th-ink-2); --muted-color: var(--th-ink-2); --error-color: var(--th-pass); --border-color: var(--th-line); --border-subtle: var(--th-line); --font-serif: var(--th-font-display); } /* -------------------------------------------------------------------------- 3. Browser surfaces Light only for now. Declaring it keeps form controls, scrollbars and the UA stylesheet from flipping when the OS is in dark mode; the dark palette lands with the mobile userInterfaceStyle change, not before. -------------------------------------------------------------------------- */ :root { color-scheme: light; accent-color: var(--th-ink); } @media (prefers-color-scheme: dark) { :root { color-scheme: light; } } ::selection { background: var(--th-love-soft); color: var(--th-ink); }