/* ============================================================================ FILTOVA DESIGN SYSTEM — tokens.css (single source of truth) ---------------------------------------------------------------------------- Panel decision 2026-06-23 (unanimous, Option C): ONE shared system + a light per-segment skin. Built from the token AUDIT of 149 screens (real in-use values) + the locked brand + the accessibility fixes. ZERO-DIFF CONTRACT: this file defines CSS custom properties + OPT-IN utility classes only — NO bare tag selectors. Linking it changes nothing visually until a screen opts in (adopts a var() or an .fm-* class). Safe to ship to all 147 screens immediately. Migrate screen-by-screen, screenshot-diffing each. SEGMENT SKIN: set (homeowners + PMs, comfortable) or (businesses, denser/premium). Same brand family. ============================================================================ */ :root { /* ---- BRAND (locked) ---- */ --brand-navy: #002873; --brand-gold: #f5d800; --brand-green: #1a5c1a; /* ---- SEMANTIC PALETTE (reconciles brand + audited in-use values) ---- */ --color-primary: var(--brand-navy); /* audit: #0040a1 crept in as de-facto primary (739×) → reconciling to brand navy */ --color-primary-bright: #0040a1; /* the lighter blue widely used; kept as an accent/link tone */ --color-accent: var(--brand-gold); --color-success: var(--brand-green); --color-secondary: #994700; /* energy-orange (audited) */ --color-tertiary: #004e5f; /* teal (audited) */ --color-error: #ba1a1a; /* (audited) */ /* ---- SURFACES (audited) ---- */ --surface: #ffffff; --surface-bg: #faf8ff; --surface-container: #ededf6; --surface-alt: #f9f9fc; /* ---- TEXT ---- */ --on-surface: #1a1b22; /* near-black body (audited) */ --on-surface-muted: #5b6470; /* A11Y FIX: audited helper gray #747784 fails 4.5:1 → #5b6470 passes */ --on-primary: #ffffff; /* white on navy = 13.5:1 ✓ */ --on-gold: #002873; /* A11Y CRITICAL: NEVER white on gold (1.43:1). Navy on gold = 9.48:1 ✓ */ --on-success: #ffffff; /* ---- STATUS (a11y-safe text colors; pair with a GLYPH, never color alone) ---- */ --status-due-text: #8a5a00; /* amber due-soon text ≥5.21:1 on pale amber */ --status-ok-text: #1a5c1a; --status-due-bg: #fff4e0; --status-ok-bg: #e7f5e9; /* ---- BORDERS ---- */ --outline: #c3c6d4; /* (audited) */ --outline-strong: #747784; /* ---- TYPE — Work Sans head / Source Sans 3 body (audited). Body min 16px (a11y). ---- */ --font-head: 'Work Sans', system-ui, -apple-system, sans-serif; --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif; --text-xs: 12px; /* labels/eyebrows ONLY — never running body */ --text-sm: 14px; --text-base: 16px; /* minimum body size */ --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-hero: 46px; --leading-tight: 1.15; --leading-body: 1.5; /* ---- SPACING — 4px scale (normalizes audited 12/13/16/20/22 drift) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 64px; /* ---- RADII (audited 10/14 dominant) ---- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-full: 9999px; /* ---- ELEVATION (audited, blue-tinted) ---- */ --elev-1: 0px 2px 4px rgba(0,64,161,0.05); --elev-2: 0px 8px 16px rgba(0,64,161,0.08); /* ---- ERGONOMICS ---- */ --tap-min: 48px; /* a11y minimum hit area */ /* ---- DENSITY (default = comfortable, residential tone) ---- */ --density-pad: var(--space-4); --density-row: 56px; } /* ===== SEGMENT SKIN — same components, different density + tone ===== */ [data-segment="residential"] { --density-pad: var(--space-4); --density-row: 56px; } /* homeowners + PMs: comfortable, friendly */ [data-segment="commercial"] { --density-pad: var(--space-3); --density-row: 48px; } /* businesses: denser, premium-procurement */ /* ===== OPT-IN UTILITIES (apply only when a screen adopts them → zero-diff until then) ===== */ .fm-btn { min-height: var(--tap-min); border-radius: var(--radius); font-family: var(--font-head); font-weight: 700; font-size: var(--text-base); padding: 0 var(--space-5); border: 0; cursor: pointer; line-height: 1; } .fm-btn--gold { background: var(--brand-gold); color: var(--on-gold); } /* navy-on-gold, a11y-safe */ .fm-btn--navy { background: var(--color-primary); color: var(--on-primary); } .fm-btn--green { background: var(--color-success); color: var(--on-success); } .fm-card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius); box-shadow: var(--elev-1); padding: var(--density-pad); } .fm-muted { color: var(--on-surface-muted); } .fm-tap { min-width: var(--tap-min); min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; } .fm-num { font-variant-numeric: tabular-nums; } /* tabular figures: prices, quantities, counters */ .fm-pill-ok { color: var(--status-ok-text); background: var(--status-ok-bg); border-radius: var(--radius-full); padding: 2px var(--space-3); font-weight: 600; } .fm-pill-due { color: var(--status-due-text); background: var(--status-due-bg); border-radius: var(--radius-full); padding: 2px var(--space-3); font-weight: 600; }