/* ============================================================================ PoolFisher — DESIGN TOKENS Direction B "Field Ops" · locked from Design Room D1, 2026-08-02 Source of truth: /var/www/html/docs/design/poolfisher-d1/index.html https://docs.micahrobinson.com/design/poolfisher-d1/ THIS FILE IS THE ONLY PLACE A COLOUR, SIZE, RADIUS OR SPACING VALUE IS ALLOWED TO BE WRITTEN AS A LITERAL. Every other stylesheet in the product references these custom properties by name. An audit test asserts that no hardcoded hex value lives outside this file. Nothing here was invented. Every value was extracted from the approved D1 mockup. Where D1 used a bare literal inline, it has been named, not changed. ========================================================================= */ :root { /* ========================================================================== 1. CHASSIS & SURFACES The dark tool body. Four steps of near-black, plus the page bed the phone chassis sits on. Everything stacks: page < chassis < panel < panel-2 < panel-3. ====================================================================== */ --page: #101318; /* outermost bed, behind the app chassis */ --chassis: #171a1f; /* app bar, tab bar, dark section blocks */ --panel: #20242a; /* default content panel / list row */ --panel-2: #262b32; /* inset panel: ledger row, stat tile */ --panel-3: #2b3138; /* hairline dividers, raised chip beds */ --ink: #16181c; /* text ON orange/yellow fills */ --map-bed: #0d0f12; /* behind a map tile while it loads */ --evidence-bed: #000000; /* behind an aerial evidence crop */ /* ========================================================================== 2. BRAND & ACCENT Orange is the action colour. Yellow is the attention/hazard colour. There is no third brand colour. See DESIGN-BRIEF.md for the law governing how many orange elements may appear per screen (one). ====================================================================== */ --orange: #ff7a1a; /* THE primary action, active state, THE */ /* verified badge, detection box, pins */ --yellow: #ffd23f; /* attention/hazard: certified, score, */ /* rule lines, money banner, cap edge */ /* ========================================================================== 3. STEEL — structure, borders, secondary type ====================================================================== */ --steel: #454d57; /* borders, rules, secondary btn edge */ --steel-2: #9aa3ad; /* secondary/label type, inactive icons */ --steel-3: #7d858e; /* deepest muted: dead chip, probable pin */ /* ========================================================================== 4. TEXT ====================================================================== */ --text: #e9ebee; /* default body and heading text */ --text-max: #ffffff; /* numeric emphasis only: scores, counts, */ /* table values, money figure */ --text-muted: var(--steel-2); --text-on-accent: var(--ink); --text-disabled: #5d656e; /* ========================================================================== 5. VERIFICATION BADGES (R4 ladder: >=1 Probable, >=2 Verified, >=5 with a human event Certified) ====================================================================== */ --badge-probable-bg: var(--panel-3); --badge-probable-fg: var(--steel-2); --badge-probable-border: var(--steel); --badge-verified-bg: var(--orange); --badge-verified-fg: var(--ink); --badge-verified-border: var(--orange); --badge-certified-bg: var(--yellow); --badge-certified-fg: var(--ink); --badge-certified-border: var(--yellow); /* ========================================================================== 6. STATUS CHIPS — the six lead states. No seventh state exists. New -> Researching -> Mailed -> Contacted -> Won | Dead Each is a dark tinted bed + a lit foreground + a mid border. ====================================================================== */ --chip-new-bg: #1f2c38; --chip-new-fg: #8fc1ea; --chip-new-border: #33506b; --chip-researching-bg: #33290f; --chip-researching-fg: #e6b45a; --chip-researching-border:#5c4a1c; --chip-mailed-bg: #3a2a10; --chip-mailed-fg: var(--yellow); --chip-mailed-border: #6b5320; --chip-contacted-bg: #12303a; --chip-contacted-fg: #6fd3e0; --chip-contacted-border: #1e5663; --chip-won-bg: #173a20; --chip-won-fg: #7fe09a; --chip-won-border: #2a6b3c; --chip-dead-bg: #2a2d31; --chip-dead-fg: var(--steel-3); --chip-dead-border: var(--steel); /* ========================================================================== 7. MAP PINS — pin colour is badge colour, never a fourth vocabulary ====================================================================== */ --pin-certified: var(--yellow); --pin-verified: var(--orange); --pin-probable: var(--steel-3); --pin-ring: var(--ink); --pin-size: 15px; --pin-size-certified: 18px; /* certified reads one size larger */ --pin-ring-width: 2px; --pin-ring-width-certified: 3px; /* ========================================================================== 8. DATA / FUNNEL ====================================================================== */ --bar-track: var(--panel-2); --bar-fill: var(--orange); --bar-fill-won: #3fbf6a; /* the only green in the product */ --bar-fill-dead: var(--steel); --bar-height: 24px; /* Reveal-cap meter (R3). Used portion is orange; remaining is a neutral diagonal hatch — remaining capacity is never drawn as a warning. */ --cap-hatch-a: var(--panel-3); --cap-hatch-b: #323942; --cap-hatch-angle: 45deg; --cap-hatch-band: 6px; --cap-bar-height: 30px; /* ========================================================================== 9. ATTENTION SURFACES ====================================================================== */ /* Rule line ("street + block only", "no export") — yellow on burnt amber */ --law-bg: #241a0f; --law-border: #4a3a1c; --law-fg: var(--yellow); /* Money / ROI banner — the one place a two-stop tonal wash is sanctioned */ --money-bg-top: #3a2a0c; --money-bg-bottom: #2b2110; --money-border: var(--yellow); --money-label: var(--yellow); --money-figure: var(--text-max); --money-sub: #d8c9a0; /* Disabled control */ --disabled-bg: var(--panel-2); --disabled-fg: var(--text-disabled); --disabled-border: #363c44; /* Loading skeleton shimmer */ --skeleton-base: var(--panel-3); --skeleton-highlight: #3a424c; /* D1 page chrome only — the phone bezel in the mockup. Not an app surface. */ --mock-frame: #333a43; /* ========================================================================== 10. SANCTIONED GRADIENTS Decorative gradients are banned (see DESIGN-BRIEF.md "The don'ts"). These three are functional, appear in D1, and are the complete list. Nothing else in the product may carry a gradient. ====================================================================== */ --grad-money: linear-gradient(180deg, var(--money-bg-top) 0%, var(--money-bg-bottom) 100%); --grad-map-scrim:linear-gradient(180deg, rgba(23,26,31,.55) 0%, rgba(23,26,31,0) 30%, rgba(23,26,31,0) 62%, rgba(23,26,31,.78) 100%); --grad-skeleton: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-highlight) 50%, var(--skeleton-base) 100%); --grad-cap-hatch:repeating-linear-gradient(var(--cap-hatch-angle), var(--cap-hatch-a), var(--cap-hatch-a) var(--cap-hatch-band), var(--cap-hatch-b) var(--cap-hatch-band), var(--cap-hatch-b) calc(var(--cap-hatch-band) * 2)); /* ========================================================================== 11. FONT STACKS — system only. No web fonts, no font loading, no FOUT. The condensed uppercase stack is the voice of this product. ====================================================================== */ --font-cond: 'Avenir Next Condensed', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', system-ui, -apple-system, sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-stretch-cond: condensed; /* ========================================================================== 12. TYPE SCALE Two families of sizes: DISPLAY (condensed, uppercase — headings, values, labels) and READING (body sans / mono — prose and machine data). ====================================================================== */ /* Display — condensed uppercase */ --fs-hero: 34px; /* money figure */ --fs-address: 27px; /* full address, lead detail — the biggest thing */ --fs-display-1: 26px; /* page h1, stat-tile value */ --fs-display-2: 25px; /* territory zip line */ --fs-display-3: 24px; /* ledger total points */ --fs-display-4: 21px; /* cap-meter number line */ --fs-display-5: 20px; /* lead score in the stat row */ --fs-title-1: 19px; /* section h2, ledger row points */ --fs-title-2: 17px; /* empty-state headline */ --fs-action: 16px; /* button label, wordmark */ --fs-item: 15px; /* h3, list-row location, territory count line */ --fs-item-sub: 14px; /* address second line, component heading */ --fs-item-tight: 13.5px;/* ledger row name */ --fs-chip: 12.5px;/* filter chip */ --fs-nav: 12px; /* back bar, funnel stage name */ --fs-label: 11px; /* section label, list head/foot, kicker */ --fs-badge: 10.5px;/* badge, status chip, tab label, rule line */ --fs-micro: 10px; /* stat-tile label, map legend, detection tag */ --fs-micro-2: 9.5px; /* ledger sub-line, vintage caption */ /* Reading — body sans and mono */ --fs-body: 15px; --fs-body-2: 13px; /* caption, small copy */ --fs-body-3: 12.5px;/* notes block, empty-state sub */ --fs-body-4: 11.5px;/* cap-meter explanation, vintage note */ --fs-mono-1: 12.5px;/* funnel value */ --fs-mono-2: 11.5px;/* list-row score */ --fs-mono-3: 11px; /* territory table, chip count */ --fs-mono-4: 10.5px;/* parcel / coordinate line, imagery vintage */ --fs-mono-5: 10px; /* evidence metadata */ --fs-mono-6: 9.5px; /* map tag, ledger sub-line */ /* ========================================================================== 13. TYPE WEIGHT / TRACKING / LEADING Condensed display type is ALWAYS 800 and ALWAYS uppercase. There is no light weight anywhere in this product. ====================================================================== */ --fw-display: 800; --fw-body: 400; --fw-body-strong: 700; --track-tight: .01em; --track-address: .03em; --track-display: .045em; --track-item: .06em; --track-chip: .08em; --track-badge: .09em; --track-nav: .10em; --track-label: .12em; --track-kicker: .14em; --lh-hero: 1.05; --lh-display: 1.1; --lh-item: 1.2; --lh-caption: 1.3; --lh-body: 1.5; --lh-body-loose: 1.55; --lh-mono: 1.65; --lh-list: 1.9; --case-display: uppercase; /* ========================================================================== 14. SPACING SCALE ====================================================================== */ --sp-0: 0; --sp-1: 2px; --sp-2: 3px; --sp-3: 5px; --sp-4: 6px; --sp-5: 7px; --sp-6: 8px; --sp-7: 9px; --sp-8: 10px; --sp-9: 11px; --sp-10: 12px; --sp-11: 13px; --sp-12: 14px; --sp-13: 16px; --sp-14: 22px; --sp-15: 26px; --sp-16: 34px; /* Named gutters — these are the ones that actually repeat in D1 */ --gutter-screen: var(--sp-12); /* 14px — every horizontal edge */ --gutter-section-y: var(--sp-11); /* 13px — section top/bottom */ --gutter-row-y: var(--sp-7); /* 9px — list-row top/bottom */ --gutter-bar-y: var(--sp-10); /* 12px — app bar top/bottom */ --gap-inline: var(--sp-5); /* 7px — chips in a scroller */ --gap-meta: var(--sp-4); /* 6px — badge/score/chip in a row */ --gap-row: var(--sp-9); /* 11px — thumb to text in a row */ --gap-tile: var(--sp-7); /* 9px — stat tiles side by side */ --gap-vintage: var(--sp-3); /* 5px — four-flight strip cells */ --stack-control: var(--sp-7); /* 9px — button to button */ /* ========================================================================== 15. RADII — square-ish. Nothing is a pill except a status chip. ====================================================================== */ --radius-0: 0; --radius-xs: 2px; /* progress fill, detection box */ --radius-sm: 3px; /* badge, small tag, cap bar */ --radius-md: 4px; /* chip, thumbnail, evidence frame, ledger */ --radius-lg: 5px; /* button, skeleton, empty state */ --radius-xl: 6px; /* callout block */ --radius-2xl: 8px; /* component card */ --radius-frame: 20px; /* D1 phone bezel only — not an app surface */ --radius-pill: 999px; /* STATUS CHIPS ONLY. Nothing else. */ /* ========================================================================== 16. BORDER WEIGHTS Borders do the structural work in this design, not shadows. ====================================================================== */ --bw-hair: 1px; /* dividers, chip and thumbnail edges */ --bw-control: 1.5px; /* secondary and disabled button edge */ --bw-strong: 2px; /* app-bar underline, tab-bar top, money banner */ --bw-marker: 3px; /* detection box, notes left edge */ --bw-callout: 5px; /* callout / address left edge */ /* ========================================================================== 17. TOUCH TARGETS — one-handed use, in a truck, possibly with a glove. 48px is the floor. Nothing tappable may be smaller. ====================================================================== */ --touch-min: 48px; /* ABSOLUTE FLOOR for any tappable element */ --touch-button: 54px; /* primary/secondary/disabled button height */ --touch-tab: 56px; /* bottom tab bar item */ --touch-row: 64px; /* list row — the most-tapped target */ --touch-chip-filter: 38px; /* filter chip: tappable, inside a 48px+ rail */ --touch-chip-status: 34px; /* status segment: tappable, inside a 48px row */ --touch-rail: var(--touch-min); /* min height of any chip scroller */ /* ========================================================================== 18. ELEVATION — there are no decorative shadows. These four exist and each has a job: separate a pin from imagery, make a detection box readable over aerial, ring a selected control, and float the D1 bezel. ====================================================================== */ --shadow-none: none; --shadow-pin: 0 1px 4px rgba(0,0,0,.8); --shadow-detection: 0 0 0 1px rgba(0,0,0,.75), 0 0 14px rgba(255,122,26,.5); --focus-ring: 0 0 0 2px var(--orange); --shadow-mock-frame: 0 12px 44px rgba(0,0,0,.6); /* D1 page chrome only */ /* Imagery treatment — aerials are toned down so UI reads on top of them */ --img-map-filter: saturate(.72) contrast(1.05) brightness(.82); --img-thumb-filter: saturate(.8) contrast(1.05); /* ========================================================================== 19. MOTION — one animation exists: the skeleton shimmer. No page transitions, no easing flourishes, no spinners. ====================================================================== */ --motion-skeleton-duration: 1.25s; --motion-skeleton-timing: linear; --motion-skeleton-travel: 220%; --opacity-inactive: .5; /* unselected status segment */ --opacity-rule: .5; /* horizontal rule */ --opacity-count: .75; /* count inside a filter chip */ /* ========================================================================== 20. LAYOUT ====================================================================== */ --screen-max: 390px; /* phone canvas D1 was drawn at */ --reading-max: 760px; /* prose column on wide surfaces */ --map-height: 196px; --thumb-size: 50px; --tile-columns: 3; /* stat tiles per row on phone */ --vintage-columns: 4; /* multi-vintage strip cells */ /* ========================================================================== 21. POSTCARD PRINT GEOMETRY (P4-D) USPS marketing card 6×4 landscape. Bleed outside trim; safe inset locks merge-field zones. Screen preview uses the same aspect; print-package artwork is sized to these inches (not a product @media print sheet — R2). ====================================================================== */ --pc-print-w: 6in; --pc-print-h: 4in; --pc-bleed: 0.125in; --pc-safe: 0.25in; --pc-zone-gap: 0.1in; --pc-fs-brand: 14pt; --pc-fs-offer: 22pt; --pc-fs-offer-bold: 28pt; --pc-fs-phone: 16pt; --pc-fs-meta: 11pt; --pc-fs-addr: 10pt; --pc-thumb-w: 72px; --pc-thumb-h: 48px; /* 6:4 aspect swatch for template picker */ }