/* ═══════════════════════════════════════════════════════════════════════════════ BRICK BY BRICK — Design Tokens v4 Forest Green + Stone/Cream + Teal (rare) + Accent Palette (purple/bronze/red/green) "Permanent infrastructure — built to last" v4 adds the accent color palette specified in ADS v1.0 Part B. All v3 tokens preserved. Additions are backward-compatible. Updated: 2026-04-20 ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Forest Palette (Primary) ─────────────────────────────────────────── */ --forest: #1a3a2a; --forest-deep: #0f2419; --forest-mid: #2a5a3f; /* ── Stone / Surface Palette ──────────────────────────────────────────── */ --stone: #e8dcc8; --stone-light: #f5efe3; --cream: #faf6ef; --mortar: #c4b494; --stone-warm: #d4c4a8; /* WO-CONFLICT-CALLOUT-CONTRAST-v1 — canonical NON-INVERTING text token for ALWAYS-dark branded surfaces (e.g. the C10 conflict banner / .c12-welcome- back-banner / .c10-topbar hero). These surfaces are visually --forest regardless of the user's OS color-scheme preference, so they need a text token that stays light in BOTH modes. The cream/stone-light family deliberately inverts with the page theme (light-page→dark-text; dark-page→light-text) which is correct for normal content but wrong for fixed-color hero surfaces. Declared identically in :root AND in the prefers-color-scheme:dark @media block below — the SAME #faf6ef value in both places. Do NOT change one without changing the other; the identical declaration IS the contract (the @media block override exists because the SAME declaration anywhere else inside that block could otherwise inherit a redefinition from a parent token-cascade refactor). */ --text-on-dark: #faf6ef; /* ── Teal (rare — CTAs on dark, .ai in logo, Corrected state) ─────────── */ --teal: #4EEBC2; --teal-deep: #085041; --teal-muted: #3bbf9e; /* ── Dimension accent ─────────────────────────────────────────────────── */ --moss: #6b8f71; /* ── Signal Colors (v3 — retained) ────────────────────────────────────── */ --amber: #D4A017; --amber-deep: #A67C00; --coral: #E07A5F; /* ── Accent Palette (NEW in v4 — per ADS v1.0 Part B) ─────────────────── */ /* Purple — Reconciliation cards, Scope Assessment sidebar, privacy accents, Phase 4b differentiation, webhook-pending state. */ --purple-accent: #7F77DD; --purple-accent-deep: #3C3489; --purple-accent-tint: rgba(127, 119, 221, 0.10); /* Card surface tint */ --purple-accent-border: rgba(127, 119, 221, 0.35); /* Border tint */ /* Stripe brand — reserved exclusively for Stripe references (portal link, receipt button, customer reference context). Do NOT use for other purple. */ --stripe-brand: #635BFF; /* Bronze — recoverable warnings, retention timer accents on Delivery, amber banner variants (more muted than --amber). */ --bronze: #B57D43; --bronze-deep: #8E5F2E; /* canonical-wins 2026-05-20 (was #8A5A28) */ --bronze-tint: rgba(181, 125, 67, 0.12); /* canonical-wins 2026-05-20 (was 0.08) */ --bronze-border: rgba(181, 125, 67, 0.35); /* Red-halt — unrecoverable errors, chargeback holds, delete confirmation, BLOCKED source badges. Distinct from --coral which is lighter/friendlier. */ --red-halt: #B85c44; --red-halt-deep: #8A3F2E; --red-halt-tint: rgba(184, 92, 68, 0.08); --red-halt-border: rgba(184, 92, 68, 0.35); /* Green-success — "Brick laid" check icons, work preservation cards on errors, Tier 1 stable recommendation. Distinct from --forest which is structural/primary. */ --green-success: #1D9E75; --green-success-deep: #0F6E56; --green-success-tint: rgba(30, 158, 117, 0.05); --green-success-border: rgba(30, 158, 117, 0.30); /* ── Canonical additions 2026-05-20 (WO-1 Mechanical Foundation) ──────── */ /* Truly missing variables — declared inline across multiple canonicals with no deployed equivalent. Source: BxB-CSS-Verification-v1.md §Missing. Promoted here so canonicals can tokens.css and resolve cleanly. */ /* Amber banner family — used by canonical c2 verify-banner, c3-c18 banners */ --amber-bg: rgba(212, 160, 23, 0.08); /* canonical c2-c18 */ --amber-soft: #F4D77A; /* canonical c2-c18 banner border */ --amber-strong: #B5860D; /* canonical c6-c18 amber-deep alt */ /* Empty-state gray — used by canonical c7 source readiness EMPTY badge, c8 build-session category empty state, c9-c15 various empty states */ --gray-empty: #a0978a; /* canonical c7-c15 */ --gray-empty-bg: rgba(160, 151, 138, 0.08); /* canonical c7 source readiness */ /* Stripe Checkout button background — c15 my-account billing card, c17 unpaid */ --stripe-purple-bg: rgba(99, 91, 255, 0.08); /* canonical c15, c17 */ /* Success / teal tint extensions — RGBA companions to existing solids */ --success-light: rgba(63, 143, 90, 0.18); /* canonical c10-c16 */ --teal-light: rgba(78, 235, 194, 0.18); /* canonical c11-c18 */ /* ── Canonical aliases 2026-05-20 (same value, different name) ────────── */ /* Canonicals use short names (--purple, --purple-bg, --stripe-purple); deployed v4 uses prefixed names (--purple-accent, --purple-accent-tint, --stripe-brand). Same hex/rgba values. Aliases let canonicals resolve without renaming every var() reference. */ --purple: var(--purple-accent); /* canonical alias */ --purple-bg: var(--purple-accent-tint); /* canonical alias */ --stripe-purple: var(--stripe-brand); /* canonical alias */ /* ═════════════════════════════════════════════════════════════════════════ Canonical-wins token additions — 2026-05-20 (Path 1.5 Stream 4) Per architect ratification: canonical color values represent intentional design evolution. Deployed code consuming the old prefixed names (--green-success, --red-halt, --purple-accent-deep, --purple-accent-border) continues to work; new canonical-aligned code uses the names below. ═════════════════════════════════════════════════════════════════════════ */ /* Success palette — canonical values (different shade than --green-success) */ --success: #3F8F5A; --success-bg: rgba(63, 143, 90, 0.10); /* canonical c10-c18 banner bg */ --success-deep: #1F6A3F; /* canonical c12-c18 */ --success-border: rgba(63, 143, 90, 0.4); /* canonical c5, c7 */ /* Error palette — canonical values (different shade than --red-halt) */ --error: #B23A3A; --error-bg: rgba(178, 58, 58, 0.08); /* canonical c3-c18 */ --error-deep: #8E2D2D; /* (canonical alias for --error-strong) */ --error-strong: #8E2D2D; /* canonical name (alias of --error-deep) */ --error-border: rgba(178, 58, 58, 0.35); /* canonical c3-c18 */ /* Purple extensions — canonical values (different than --purple-accent-deep/border) */ --purple-deep: #5A52B5; /* canonical c9-c18 */ --purple-strong: rgba(127, 119, 221, 0.18); /* canonical c13-c18 */ /* ── Bronze value updates — 2026-05-20 (canonical wins) ─────────────────── */ /* Architect ratified canonical values supersede the v4 originals. v4 originals (#8A5A28, rgba(.08/.18 light/dark)) preserved in @media block below for dark-mode behavior. */ /* ═════════════════════════════════════════════════════════════════════════ Brand color family — 2026-05-20 (Path 1.5 Stream 5) Consumed by: c5 Connectors, c7 Source Readiness, c13 Update Hub, c15 My Account, c17 Unpaid, c18 Error States, and any future connector surfaces. `--brand-stripe` aliases existing `--stripe-brand` for naming consistency. ═════════════════════════════════════════════════════════════════════════ */ /* Payment + financial */ --brand-stripe: var(--stripe-brand); /* alias — same #635BFF */ --brand-quickbooks: #2CA01C; --brand-xero: #13B5EA; --brand-netsuite: #125AA8; --brand-sap: #0FAAFF; /* CRM */ --brand-salesforce: #00A1E0; --brand-hubspot: #FF7A59; /* Productivity — Google */ --brand-google-drive: #0F9D58; --brand-google-workspace: #4285F4; /* Productivity — Microsoft */ --brand-microsoft-365: #0078D4; --brand-onedrive: #0078D4; --brand-sharepoint: #0078D4; --brand-outlook: #0078D4; --brand-teams: #6264A7; --brand-power-bi: #F2C811; /* Communication */ --brand-slack: #4A154B; /* Collaboration — Atlassian */ --brand-atlassian: #0052CC; --brand-jira: #0052CC; --brand-confluence: #172B4D; /* Storage */ --brand-dropbox: #0061FF; --brand-box: #0061D5; /* Project management */ --brand-asana: #F06A6A; --brand-linear: #5E6AD2; --brand-monday: #FF3D57; /* HR */ --brand-bamboohr: #629B0D; --brand-linkedin: #0A66C2; /* ── Text Colors ──────────────────────────────────────────────────────── */ --text-dark: #1a1a14; --text-body: #3a3628; --text-muted: #6c6457; /* ── Spacing Scale ────────────────────────────────────────────────────── */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 100px; /* Sub-scale for tighter intra-component spacing (NEW in v4). Used for card internals, badge padding, input spacing. */ --space-2xs: 4px; --space-sm-plus: 12px; --space-md-minus: 20px; /* ── Border Radius ────────────────────────────────────────────────────── */ --radius: 8px; /* Scale variants (NEW in v4). Defaults still use --radius. */ --radius-sm: 6px; /* Chips, small pills, badge pills */ --radius-lg: 12px; /* Celebration cards, large modals, delivery status blocks */ --radius-pill: 999px; /* Full-round pills (status badges, grounding anchor pills) */ /* ── Border Widths ────────────────────────────────────────────────────── */ --border-default: 1px; /* Standard card, input */ --border-accent: 2px; /* Reconciliation card purple, chargeback red, attention states */ --border-stripe: 3px; /* Left-stripe accent (Temporal cards, Signal categories) */ /* ── Typography ───────────────────────────────────────────────────────── */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; /* NEW in v4 */ /* ── Type Scale (NEW in v4.1 — WS-A) ────────────────────────────────────── Additive foundation. Nothing references these until per-surface adoption (c10 first). Sizes are non-var today, so adding these changes no render. Font-size steps — ~1.25 modular scale, 16px body base. */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.30; --lh-normal: 1.55; --lh-relaxed: 1.70; --fw-body: var(--fw-regular); --fw-label: var(--fw-medium); --fw-emphasis: var(--fw-semibold); --fw-heading: var(--fw-semibold); --fw-display: var(--fw-bold); /* ── Shadows (subtle, warm) ───────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(26, 58, 42, 0.06); --shadow-md: 0 4px 16px rgba(26, 58, 42, 0.08); --shadow-lg: 0 8px 32px rgba(26, 58, 42, 0.12); /* Overlay shadow — for modals, Lock Screen reauth card (NEW in v4). */ --shadow-overlay: 0 16px 48px rgba(15, 36, 25, 0.24); /* ── Transitions ──────────────────────────────────────────────────────── */ --ease: 200ms ease-out; --ease-slow: 400ms ease-out; --ease-page: 600ms ease-out; /* Accordion / editor expand (NEW in v4). Slightly faster than --ease-slow for inline editors that shouldn't feel sluggish. */ --ease-accordion: 260ms cubic-bezier(0.4, 0, 0.2, 1); /* Toast fade — undo toast auto-dismiss (NEW in v4). */ --ease-toast: 180ms ease-in; /* ── Z-Index Scale (NEW in v4) ────────────────────────────────────────── */ --z-base: 0; --z-card: 10; --z-sticky: 20; /* Dimension header strip, category breadcrumb */ --z-toast: 80; /* Undo toast */ --z-modal: 100; /* Review All Cards modal, delete confirmation */ --z-overlay: 200; /* Lock Screen / Reauth overlay (highest) */ } /* ═══════════════════════════════════════════════════════════════════════════════ DARK MODE OVERRIDES Accent tokens (purple/bronze/red/green) keep their hue but shift surface tints for dark backgrounds. ═══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root { --stone: #2a2926; --stone-light: #1e1d1b; --cream: #252422; --mortar: #3a3835; --stone-warm: #3a3628; /* WO-CONFLICT-CALLOUT-CONTRAST-v1 — DELIBERATELY identical to :root. Mirrors the light-mode value so --text-on-dark stays #faf6ef in BOTH OS color schemes. The duplicate is the contract: any divergence here would re-introduce the cream-style inversion bug on always-dark hero surfaces. Keep these two declarations in lockstep. */ --text-on-dark: #faf6ef; --text-dark: #f5efe3; --text-body: #d4c8b0; --text-muted: #8a7e6a; /* Accent tints shift for dark mode readability (NEW in v4). */ --purple-accent-tint: rgba(127, 119, 221, 0.18); --purple-accent-border: rgba(127, 119, 221, 0.45); --bronze-tint: rgba(181, 125, 67, 0.18); --bronze-border: rgba(181, 125, 67, 0.45); --red-halt-tint: rgba(184, 92, 68, 0.18); --red-halt-border: rgba(184, 92, 68, 0.45); --green-success-tint: rgba(30, 158, 117, 0.12); --green-success-border: rgba(30, 158, 117, 0.40); /* Shadow tints deepen in dark mode. */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.40); --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.56); } }