/* ============================================================================= leadstore-platform — design tokens ============================================================================= Three layers, and the boundary between them is the licensing product. LAYER 1 PLATFORM Fixed. Spacing, type scale, timing, control geometry. A tenant cannot override these. Changing them is a fork. LAYER 2 TENANT Themed. Color, type family, radius, density, logo. Set per tenant on . LAYER 3 CONFIG Not CSS at all. Lead types, age buckets, prices, attribute registry, state list. Lives in JSON. THE RULE THIS FILE EXISTS TO ENFORCE No component may hardcode a lead type, an age bucket, a price, or a state. If a value differs between two tenants it is a token or it is config. It is never a conditional inside a component. THEME POSTURE The storefront commits to a light commercial look, deliberately. It simulates a product a broker ships to buyers, and that product is not theme-switched. Internal documents in docs/ are theme-aware; the storefront is not. A dark tenant theme is addable as another [data-tenant] block without touching a single component. ========================================================================== */ /* ============================================================================= LAYER 1 — PLATFORM. Fixed geometry and behavior. ========================================================================== */ :root { /* --- spacing: 4px base, no arbitrary values anywhere in components ------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* --- type scale: 1.2 minor third off a 16px body ------------------------ */ --text-xs: 0.694rem; /* 11.1px — chip labels, table headers */ --text-sm: 0.833rem; /* 13.3px — helper text, metadata */ --text-base: 1rem; /* 16px — body */ --text-md: 1.2rem; /* 19.2px — control labels, card titles */ --text-lg: 1.44rem; /* 23px — section headings */ --text-xl: 1.728rem; /* 27.6px — page headings */ --text-2xl: 2.074rem; /* 33.2px — price figure */ --text-count: 3.583rem; /* 57.3px — the count. The largest thing on screen, because it is the product. Nothing else gets it. */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --measure: 68ch; /* --- timing: these numbers ARE the product ------------------------------ --debounce-count is the pause after the last keystroke or click before a count request fires. Too low floods the endpoint; too high makes the number feel disconnected from the action. 180ms tests well and is the figure the requirements doc commits to. --stale-after is when a pending count stops being "recomputing" and starts being "stale" — at which point the UI shows an as-of time rather than implying the number is current. */ --debounce-count: 180ms; --swap-count: 120ms; /* the crossfade when the number changes */ --stale-after: 2000ms; --dur-fast: 90ms; --dur-base: 160ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* --- borders ------------------------------------------------------------ */ --border-hair: 1px; --border-emph: 2px; --border-accent: 3px; /* --- control geometry, density-scaled ---------------------------------- Tenants set --density (1 = comfortable, 0.875 = compact). Control heights derive from it so a dense tenant gets a dense store without a restyle. */ --density: 1; --control-h: calc(36px * var(--density)); --control-h-lg: calc(44px * var(--density)); --chip-h: calc(26px * var(--density)); --tap-min: 44px; /* never below this on touch, regardless of density */ /* --- layout ------------------------------------------------------------- */ --shell-max: 1320px; --filter-rail: 340px; /* the filter panel column on desktop */ --gutter: var(--space-6); /* --- stacking ----------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; /* the count readout when it docks on scroll */ --z-dropdown: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* --- breakpoints, documented here and used in media queries ------------- 640 phone -> filters become a drawer, count docks to the bottom edge 960 tablet -> single column, filter rail collapses above results 1280 desktop -> full two-column shell */ } /* ============================================================================= LAYER 2 — TENANT. Everything below here varies per broker. ========================================================================== */ /* ----------------------------------------------------------------------------- TENANT: exchange — the neutral house brand. A platform-operator demo store. Cool, precise, slightly institutional. Indigo carries the brand; a deep teal carries availability. -------------------------------------------------------------------------- */ [data-tenant="exchange"] { --tenant-name: "The Lead Exchange"; /* surfaces */ --bg: #F4F5F8; --surface: #FFFFFF; --raised: #FFFFFF; --sunk: #EDEFF4; /* text */ --ink: #12161F; --body: #39414F; --muted: #6B7484; --on-brand: #FFFFFF; /* lines */ --rule: #DDE1E9; --rule-strong: #BFC6D2; /* brand */ --brand: #2E3A8C; --brand-hover: #26307A; --brand-soft: #E8EBF7; /* THE COUNT. Semantic, never the brand color, always the highest-contrast accent in the theme. It is the only element permitted this hue. */ --count: #0F6F62; --count-soft: #E2F0ED; /* semantic state, separate from brand and from count */ --ok: #1C6B3C; --ok-soft: #E4F1E9; --warn: #8A5A08; --warn-soft: #FBF0DC; --danger: #A3232B; --danger-soft: #F9E7E8; /* type */ --font-display: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-text: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* shape + density */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-pill: 999px; --density: 1; --shadow-sm: 0 1px 2px rgba(18, 22, 31, .06); --shadow-md: 0 2px 4px rgba(18, 22, 31, .06), 0 8px 20px -10px rgba(18, 22, 31, .18); } /* ----------------------------------------------------------------------------- TENANT: als — Aged Lead Store. Palette taken from their live stylesheet, not invented: header red #BD212F, hover #C43743, charcoal #303236, accent orange #CF6E0E. Modernized in contrast and spacing, recognizably the same brand. Count runs amber here because green-on-red reads as decoration and their own orange is already in the palette. -------------------------------------------------------------------------- */ [data-tenant="als"] { --tenant-name: "Aged Lead Store"; --bg: #F6F4F3; --surface: #FFFFFF; --raised: #FFFFFF; --sunk: #EFEBEA; --ink: #26282B; --body: #454A4F; --muted: #777E84; --on-brand: #FFFFFF; --rule: #E0DBD9; --rule-strong: #C3BCB9; --brand: #BD212F; --brand-hover: #A0141F; --brand-soft: #FBEAEB; --count: #9A4E06; --count-soft: #FCEDDF; --ok: #3F7517; --ok-soft: #ECF3E4; --warn: #8A5A08; --warn-soft: #FBF0DC; --danger: #9E0C0F; --danger-soft: #F9E6E6; --font-display: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-text: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; /* ALS runs denser and squarer than the house brand — this is the whole point of the density and radius tokens being tenant-owned. */ --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-pill: 999px; --density: 0.94; --shadow-sm: 0 1px 2px rgba(38, 40, 43, .07); --shadow-md: 0 2px 4px rgba(38, 40, 43, .07), 0 8px 20px -10px rgba(38, 40, 43, .2); } /* ============================================================================= ACCESSIBILITY FLOOR — platform-fixed, applies under every tenant. ========================================================================== */ :root { --focus-ring: var(--border-emph) solid var(--count); --focus-offset: 2px; } @media (prefers-reduced-motion: reduce) { :root { --swap-count: 0ms; --dur-fast: 0ms; --dur-base: 0ms; } } /* Touch targets never shrink below the platform floor, whatever a tenant sets --density to. A dense theme is a visual choice, not a licence to ship 30px tap targets to somebody working a phone in a parking lot. */ @media (pointer: coarse) { :root { --control-h: max(calc(36px * var(--density)), var(--tap-min)); --control-h-lg: max(calc(44px * var(--density)), var(--tap-min)); } }