/* ================================================================================ ML Software, LLC Copyright 2026. All rights reserved. IQ Platform - _app/assets/css/tokens.css Platform: 0.1.0 Version: 0.1.2 Created: 2026-04-27 Updated: 2026-04-27 Description: Design tokens for the IQ Platform. Every color, spacing unit, font, layout dimension, radius, shadow, and z-index used by any platform component is defined here as a CSS custom property. Component CSS files reference these tokens; they NEVER hardcode colors, sizes, or fonts. This is the layer that makes the platform themeable and makes per-product accents a one-block override. Load order: tokens.css MUST load first. Every other platform CSS file depends on these custom properties being defined. Theme architecture: The platform ships ONE canonical dark theme. The token block is structured so that adding a light theme later is one override block, not a refactor of every component. Components read tokens only -- they do not branch on theme. Per-product accent overrides go in a product-owned theme.css that loads AFTER tokens.css and overrides only the --accent-* family. Most products will only need to set those five accent tokens. Some products may also override --topbar-h or other layout tokens; that is fine but should be deliberate. The five canonical accent tokens (every product overrides these): --accent Primary brand color. Used for buttons, links, modal titles, focus rings, active nav, accents. --accent-light Lighter variant for hover states. --accent-deep Darker variant for pressed states or subtle uses where the accent should sit back a step. --accent-dim Translucent (rgba) variant for backgrounds, fills, and tints. Typically the accent at ~18% alpha. --accent-bord Translucent variant for borders and outlines. Typically the accent at ~35% alpha. Platform default is a sober blue. Each product's theme.css overrides this set with its brand palette (RIQ amber, JQiq flame, DZIQ blue, etc.). What products SHOULD override: - The --accent-* family (always) - --topbar-h (rarely; only if the product needs a taller topbar for branding or a different control layout) What products should NOT override (without good reason): - The surface stack (--bg-base through --bg-overlay). This is the visual identity of the platform. A product overriding these is signing up to redesign every component. - Text colors. Same reason. - Border colors. Same reason. - Status colors (--green, --yellow, --red, etc.). These are semantic across all products. Red means error in every IQ product, period. - Typography tokens. Inter and Barlow Condensed are the platform standard. Version History: 0.1.2 - 2026-04-27 - Destructive color corrected. Per the kickoff ยง5.8 locked decision, --red is burgundy (#7a1f24), not coral (#ff6450). The previous extraction pulled coral from JQiq 1.9.7 source; the correct baseline was 1.9.8 (built but not deployed when the extraction happened) which had migrated to burgundy. Added the full red companion set: --red #7a1f24 base / button bg --red-hover #9b2730 hover state --red-text #ff8a8a foreground on dark --red-dim rgba(255,138,138,0.10) tint --red-bord rgba(255,138,138,0.30) border components.css 0.1.2 and forms.css 0.1.2 were updated in the same pass to consume these tokens instead of hardcoded rgba(255,100,80,...) coral references. 0.1.1 - 2026-04-27 - Session 3 cont'd. Added readability and touch-target floor tokens enforced platform-wide: --font-min-display 12px (small caps) --font-min-secondary 13px (helper text) --font-min-body 14px (body text) --touch-target-min 40px (desktop) --touch-target-touch 44px (coarse pointer) Other CSS files were updated to honor these floors -- see their version histories for specific bumps. The pre-existing 11px badges, table headers, and nav labels were the worst offenders and were corrected. 0.1.0 - 2026-04-27 - Session 3 initial. Tokens extracted and reconciled across JobQuote IQ 1.9.7, Renewal IQ 2.49.0, and DropZone IQ 3.23.8. Reconciliations: - Adopted JQiq's 5-token accent palette (--accent, --accent-light, --accent-deep, --accent-dim, --accent-bord) as the canonical product override surface. DZIQ and RIQ had 3 tokens; they backfill when migrated. - Standardized on --accent (replaces --amber, --blue used inconsistently in legacy apps). - Topbar height set to 64px platform default. Products overriding for branding (RIQ uses 76px) do so in their theme.css. - Surface stack, borders, text, status colors, layout, typography: identical across all three apps -> adopted verbatim, no debate. ================================================================================ */ :root { /* ========================================================================== Surface stack Darkest at the base of the visual depth, lightest at the top. Every surface in the app picks one of these four; nothing else. ========================================================================== */ --bg-base: #0d0d0f; /* page background, behind everything */ --bg-surface: #16161a; /* cards, panels, the topbar */ --bg-raised: #1c1c22; /* inputs, table row hover, raised UI */ --bg-overlay: #222228; /* tooltips, dropdowns, modals over surface */ /* ========================================================================== Borders ========================================================================== */ --border: #2a2a32; /* default border for cards, panels, dividers */ --border-light: #333340; /* slightly brighter, for inputs and emphasized edges */ /* ========================================================================== Text ========================================================================== */ --text-primary: #f0f0f4; /* body text, headings */ --text-secondary: #b0b0c4; /* secondary labels, less-important info */ --text-dim: #7a7a94; /* placeholders, muted helper text, disabled */ /* ========================================================================== Status colors (semantic, used identically across every IQ product) Red means error. Green means success. Don't repurpose these. ========================================================================== */ --green: #4cff91; /* success, healthy, compliant */ --yellow: #ffc832; /* pending, warning, attention */ --red: #7a1f24; /* destructive action color (button bg, solid fills) */ --red-hover: #9b2730; /* destructive hover state */ --red-text: #ff8a8a; /* red foreground on dark surfaces (status text, errors) */ --red-dim: rgba(255, 138, 138, 0.10); /* subtle red tint for backgrounds */ --red-bord: rgba(255, 138, 138, 0.30); /* red border for error-state surfaces */ --crimson: #7a0000; /* deep error, urgent (distinct from --red, used sparingly) */ --crimson-text: #ffaaaa; /* readable text on crimson backgrounds */ --orange: #ff9c3a; /* warning, mid-priority, transitional state */ --purple: #b464ff; /* informational accent */ --blue-info: #64a0ff; /* informational, neutral callouts (NOT brand) */ /* ========================================================================== Accent (brand) palette -- THIS IS WHAT PRODUCTS OVERRIDE. The platform default is a sober blue. Each product's theme.css overrides these five tokens with its own brand colors. ========================================================================== */ --accent: #1a6fff; /* primary brand color */ --accent-light: #4d8fff; /* hover */ --accent-deep: #1457cc; /* pressed / subdued */ --accent-dim: rgba(26, 111, 255, 0.18); /* tints, fills, glows */ --accent-bord: rgba(26, 111, 255, 0.35); /* borders, outlines */ /* ========================================================================== Layout ========================================================================== */ --sidebar-w: 220px; --topbar-h: 64px; /* ========================================================================== Radius ========================================================================== */ --radius: 6px; /* default for buttons, inputs, badges */ --radius-lg: 10px; /* cards, panels */ --radius-xl: 12px; /* modals */ /* ========================================================================== Typography ========================================================================== */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Barlow Condensed', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, monospace; /* ========================================================================== Readability floors (enforced platform-wide) These are MINIMUMS, not targets. No platform component drops below these values. The touch override below pushes everything up a notch on coarse-pointer devices. ========================================================================== */ --font-min-display: 12px; /* display-font small caps (badges, table headers, nav labels) */ --font-min-secondary: 13px; /* secondary text (helper text, form labels, button-sm) */ --font-min-body: 14px; /* body text, descriptions, content, tooltips */ /* ========================================================================== Touch target floors (enforced platform-wide) ========================================================================== */ --touch-target-min: 40px; /* desktop minimum (mouse/trackpad) */ --touch-target-touch: 44px; /* coarse-pointer minimum (phone, tablet) */ /* ========================================================================== Shadows Platform shadows are minimal. Dark theme leans on borders + surface contrast, not drop shadows. The only meaningful shadow is on modals. ========================================================================== */ --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.45); --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.3); /* dropdowns, tooltips */ /* ========================================================================== Transitions One canonical duration for UI feedback. Standardizing this makes the whole app feel like the same product. ========================================================================== */ --t-fast: 0.12s; --t-medium: 0.2s; --t-slow: 0.32s; /* ========================================================================== Z-index layers Stacked from low (behind) to high (in front). All platform components pick a layer; product code should rarely need anything above 1000. ========================================================================== */ --z-sidebar: 100; --z-topbar: 200; --z-overlay: 500; /* mobile sidebar overlay */ --z-dropdown: 1000; --z-tooltip: 8000; --z-modal: 9000; --z-toast: 9500; /* always above modals */ } /* ================================================================================ HOW A PRODUCT OVERRIDES TOKENS Each IQ product ships a theme.css that loads AFTER tokens.css. A typical product theme is 5 to 10 lines: :root { --accent: #d97706; --accent-light: #f59e0b; --accent-deep: #b45e04; --accent-dim: rgba(217, 119, 6, 0.18); --accent-bord: rgba(217, 119, 6, 0.35); } That's it. Every component reads --accent and friends from the cascade; the override flows everywhere automatically. Reference accent palettes from the existing apps (for migration): JobQuote IQ -- flame orange --accent: #ff6b1a --accent-light: #ff8533 --accent-deep: #cc4f0a --accent-dim: rgba(255, 107, 26, 0.18) --accent-bord: rgba(255, 107, 26, 0.35) Renewal IQ -- amber --accent: #d97706 --accent-light: #f59e0b --accent-deep: #b45e04 --accent-dim: rgba(217, 119, 6, 0.18) --accent-bord: rgba(217, 119, 6, 0.35) DropZone IQ -- electric blue --accent: #1a6fff --accent-light: #4d8fff --accent-deep: #1457cc --accent-dim: rgba(26, 111, 255, 0.18) --accent-bord: rgba(26, 111, 255, 0.35) ================================================================================ */