/* ============================================================================= BuildBoost — Invoice Module Design Tokens Premium design language. Single source of truth for the redesign mockups and the .NET 9 Blazor WASM + MudBlazor implementation. USAGE NOTES (Blazor WASM + per-component CSS isolation) - Load this file GLOBALLY (e.g. wwwroot/css/tokens.css referenced in index.html), NOT as a scoped .razor.css. Scoped styles do not cascade across components, but CSS custom properties declared on :root inherit through the DOM into every component's shadow-free scope, so each *.razor.css can read var(--bb-*) freely. - Component .razor.css files must consume these tokens; never hardcode hex. - This replaces the conflicting legacy values found in the audit: brand split #00B7DD (real --primary) vs #00A9E0 (stray fallback) ad-hoc iOS --ios-blue/--ios-label/--ios-separator (undefined in places) Material #1565c0 / #e65100 / #ffcc02 (quota banner) 3x greens/reds across participant pill, delivery badge, list. - One accent (BuildBoost teal, formalized from the real brand #00B7DD), one neutral ramp, one semantic set, one elevation/motion system. ========================================================================== */ :root { /* --------------------------------------------------------------------------- 1. TYPOGRAPHY One variable grotesque for UI + one mono for money/IDs/numbers. Base UI size 14px (not iOS 17px). Weights 400/510/590 only (no 700 in UI). Tabular figures on every total. Negative tracking on large type. ------------------------------------------------------------------------- */ --bb-font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --bb-font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Weights — 700 deliberately absent from product UI */ --bb-weight-regular: 400; --bb-weight-medium: 510; --bb-weight-semibold: 590; /* Type scale (font-size / line-height / tracking). Modular, restrained. */ --bb-text-display: 32px; --bb-lh-display: 1.10; /* page hero, big amounts */ --bb-text-title: 24px; --bb-lh-title: 1.20; /* page / dialog title */ --bb-text-heading: 18px; --bb-lh-heading: 1.30; /* card / section heading */ --bb-text-body-lg: 16px; --bb-lh-body-lg: 1.50; /* emphasis body */ --bb-text-body: 14px; --bb-lh-body: 1.50; /* DEFAULT UI text */ --bb-text-label: 13px; --bb-lh-label: 1.40; /* form labels, table head */ --bb-text-caption: 12px; --bb-lh-caption: 1.35; /* meta, helper, timestamp */ --bb-text-micro: 11px; --bb-lh-micro: 1.30; /* uppercase eyebrows, tags */ /* Tracking */ --bb-track-display: -0.022em; /* tighten large display */ --bb-track-title: -0.016em; /* tighten titles */ --bb-track-heading: -0.011em; /* slight tighten on headings */ --bb-track-body: 0; /* leave body alone */ --bb-track-caps: 0.06em; /* open up uppercase micro */ /* Numeric helper — apply on totals/tables/counters */ --bb-numeric: tabular-nums; /* --------------------------------------------------------------------------- 2. COLOR — NEUTRALS (the ~90% of the UI) 12-step ramp, tinted a hair cool to read intentional, not sterile. Surfaces near-white separated by thin borders, NOT grey background bands. Primary text is #1A1A1F (never pure black). ------------------------------------------------------------------------- */ --bb-gray-1: #FBFBFC; /* app background (page) */ --bb-gray-2: #F6F7F9; /* subtle fill / hovered row / inset */ --bb-gray-3: #EFF1F4; /* secondary fill / track */ --bb-gray-4: #E7EAEE; /* stronger fill / pressed */ --bb-gray-5: #DFE3E8; /* disabled surface */ --bb-gray-6: #D5DAE1; /* default border (≈ rgba near 12%) */ --bb-gray-7: #C2C8D1; /* strong border / divider */ --bb-gray-8: #9AA2AE; /* placeholder / disabled text */ --bb-gray-9: #767E8B; /* icon muted */ --bb-gray-10: #5C6370; /* secondary / muted text */ --bb-gray-11: #3A4150; /* strong secondary text */ --bb-gray-12: #1A1A1F; /* PRIMARY text (not pure black) */ /* Hairline borders as alpha (seat edges without a hard line) */ --bb-border: rgba(20, 24, 33, 0.10); --bb-border-strong: rgba(20, 24, 33, 0.16); --bb-border-subtle: rgba(20, 24, 33, 0.06); /* Canonical surfaces */ --bb-surface-page: var(--bb-gray-1); --bb-surface-card: #FFFFFF; --bb-surface-raised: #FFFFFF; --bb-surface-sunken: var(--bb-gray-2); --bb-surface-overlay: #FFFFFF; /* Text roles */ --bb-text-primary: var(--bb-gray-12); --bb-text-secondary: var(--bb-gray-10); --bb-text-tertiary: var(--bb-gray-9); --bb-text-disabled: var(--bb-gray-8); --bb-text-on-accent: #FFFFFF; --bb-text-link: var(--bb-accent); /* --------------------------------------------------------------------------- 3. COLOR — ACCENT (BuildBoost teal; the 5-10%) Formalized from the REAL brand #00B7DD. One hue, committed. Used only on primary action, active nav, links, selection, focus, key data. A 12-step ramp so we get tints (selected row, soft fills) + a darker pressed/text-on-light value, all from one hue. ------------------------------------------------------------------------- */ --bb-accent-1: #F2FCFE; /* faintest tint — selected row bg */ --bb-accent-2: #E4F8FC; /* soft fill / hover bg */ --bb-accent-3: #C9F0F8; /* tint border / chip bg */ --bb-accent-4: #A6E6F2; /* stronger tint */ --bb-accent-5: #6FD6EA; /* light accent */ --bb-accent-6: #33C3E0; /* accent hover (lighter than base) */ --bb-accent-7: #00B7DD; /* ★ BRAND / PRIMARY accent (base) */ --bb-accent-8: #009FC2; /* accent pressed */ --bb-accent-9: #0089A8; /* accent strong */ --bb-accent-10: #0a6f8a; /* accent text-on-light (AA on white) */ --bb-accent-11: #075a70; /* darker accent text */ --bb-accent-12: #073d4d; /* deepest accent (headings on tint) */ --bb-accent: var(--bb-accent-7); --bb-accent-hover: var(--bb-accent-6); --bb-accent-pressed: var(--bb-accent-8); --bb-accent-text: var(--bb-accent-10); /* accent as readable text */ --bb-accent-bg: var(--bb-accent-2); /* soft accent background */ --bb-accent-bg-hover: var(--bb-accent-3); --bb-accent-ring: rgba(0, 183, 221, 0.38); /* focus halo */ /* Secondary brand ink (navy, from marketing #0c1e36) — sparing use: dark headers, the upgrade-wall hero. NOT a second UI accent. */ --bb-ink: #0C1E36; --bb-ink-soft: #15294a; /* Text/overlay roles ON an ink surface (the only place white is allowed — components must reference these, never raw #fff/rgba-white). */ --bb-text-on-ink: #FFFFFF; --bb-text-on-ink-secondary: rgba(255, 255, 255, 0.72); --bb-overlay-on-ink: rgba(255, 255, 255, 0.12); /* --------------------------------------------------------------------------- 4. COLOR — SEMANTIC (status). Desaturated to sit with the neutrals. Each as bg-tint + border + text + solid so a status is a soft pill, never raw colored text and never fire-engine #F00 / #0F0. These are the ONE set the participant pill, delivery badge, status badges, quota banner and toasts all share. ------------------------------------------------------------------------- */ /* success (paid / reachable / delivered) */ --bb-success: #1F9D57; --bb-success-hover: #1B8A4D; --bb-success-text: #157a42; --bb-success-bg: #E8F7EE; --bb-success-border: #BCE8CE; /* warning (approaching limit / wrong-format / attention) */ --bb-warning: #C77A0A; --bb-warning-text: #9a5d05; --bb-warning-bg: #FCF2E2; --bb-warning-border: #F2DBB0; /* danger (hard error / failed / overdue) */ --bb-danger: #DC4C4C; --bb-danger-hover: #C93C3C; --bb-danger-text: #b62f2f; --bb-danger-bg: #FCECEC; --bb-danger-border: #F3C9C9; /* info (neutral informational / unknown-but-not-error) */ --bb-info: #2D7FF0; --bb-info-text: #1c63c4; --bb-info-bg: #EAF2FE; --bb-info-border: #C6DCFB; /* neutral status (idle / not-reachable-fallback / unknown). IMPORTANT: "not reachable on Peppol" uses NEUTRAL, never danger. */ --bb-neutral-text: var(--bb-gray-10); --bb-neutral-bg: var(--bb-gray-3); --bb-neutral-border: var(--bb-gray-6); /* --------------------------------------------------------------------------- 5. SPACING — strict 4px scale. Every margin/padding/gap is a token. ------------------------------------------------------------------------- */ --bb-space-0: 0; --bb-space-1: 2px; --bb-space-2: 4px; --bb-space-3: 6px; --bb-space-4: 8px; /* workhorse gutter */ --bb-space-5: 12px; --bb-space-6: 16px; /* section padding */ --bb-space-7: 20px; --bb-space-8: 24px; /* card padding / section sep */ --bb-space-9: 32px; --bb-space-10: 40px; --bb-space-11: 48px; --bb-space-12: 64px; /* Content measure — don't let forms stretch on wide monitors */ --bb-measure-form: 720px; --bb-measure-editor: 1200px; /* editor canvas + sidebar */ --bb-sidebar-w: 256px; /* nav drawer width (approved nav-drawer redesign) */ /* --------------------------------------------------------------------------- 6. RADII — small + consistent. Base 8px, 6px nested, respect nesting. Never 16px+ on controls (reads consumer). Pills are fully round. ------------------------------------------------------------------------- */ --bb-radius-xs: 4px; /* tiny chips, inner of inner */ --bb-radius-sm: 6px; /* inputs, buttons, nested elements */ --bb-radius: 8px; /* DEFAULT — cards, dialogs */ --bb-radius-lg: 12px; /* large surfaces, modal */ --bb-radius-pill: 999px; /* badges, toggles, status pills */ /* --------------------------------------------------------------------------- 7. ELEVATION — stacked, low-opacity, single light source (from top). Borders for inline structure; shadows only for things that float. ------------------------------------------------------------------------- */ --bb-shadow-none: none; /* resting card in flow — pairs with a 1px border */ --bb-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --bb-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); /* raised (row hover, sticky bars) */ --bb-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.05), 0 4px 10px rgba(16, 24, 40, 0.07); /* overlay (dropdowns, popovers, the Peppol check panel when floating) */ --bb-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.10), 0 0 0 1px rgba(16, 24, 40, 0.04); /* modal / dialog */ --bb-shadow-xl: 0 8px 16px rgba(16, 24, 40, 0.08), 0 24px 48px rgba(16, 24, 40, 0.16), 0 0 0 1px rgba(16, 24, 40, 0.04); /* focus ring (accent halo, offset by surface) */ --bb-shadow-focus: 0 0 0 2px var(--bb-surface-card), 0 0 0 4px var(--bb-accent-ring); /* inner top-highlight for tactile filled buttons */ --bb-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* translucent white state overlays on dark surfaces (app nav hover/active) */ --bb-overlay-hover: rgba(255, 255, 255, 0.08); --bb-overlay-active: rgba(255, 255, 255, 0.22); /* --------------------------------------------------------------------------- 8. MOTION — fast, subtle, purposeful. Linear-fast, not bouncy. Animate opacity + transform only. Respect prefers-reduced-motion. ------------------------------------------------------------------------- */ --bb-ease-out: cubic-bezier(0.20, 0, 0, 1); /* entrances */ --bb-ease-in-out: cubic-bezier(0.45, 0, 0.20, 1); /* moves */ --bb-ease-spring: cubic-bezier(0.34, 1.30, 0.64, 1); /* tiny overshoot — selective */ --bb-dur-instant: 80ms; /* hover bg, press */ --bb-dur-fast: 130ms; /* hovers, toggles */ --bb-dur-pop: 180ms; /* dropdowns, popovers, status transitions */ --bb-dur-modal: 220ms; /* dialogs */ --bb-dur-route: 280ms; /* page / route */ /* --------------------------------------------------------------------------- 9. COMPONENT SIZING — dense pro-tool, not phone-app. Rows ~36-40px, inputs ~36px, buttons ~36-40px. ------------------------------------------------------------------------- */ --bb-control-h-sm: 32px; --bb-control-h: 36px; /* default input / button height */ --bb-control-h-lg: 44px; /* primary CTA */ --bb-row-h: 40px; /* table / list row */ --bb-tap-min: 40px; /* min hit target */ /* z-index scale */ --bb-z-sticky: 100; --bb-z-bottom-nav: 150; /* mobile bottom nav bar — above page content, below dropdowns */ --bb-z-dropdown: 600; --bb-z-overlay: 700; --bb-z-modal: 800; --bb-z-toast: 900; /* Mobile bottom-nav VISUAL height (excl. safe-area) — single source of truth so any in-page fixed/sticky bottom bar can lift itself above the nav via `calc( + var(--bb-bottom-nav-height))`. 0px on desktop (no nav), so every such calc reduces to the original value ≥960px. Kept in sync with BottomNav.razor.css (height: calc(56px + env(safe-area-inset-bottom))). */ --bb-bottom-nav-height: 0px; } /* Mobile (<960px): the bottom nav is present, so expose its real 56px visual height. */ @media (max-width: 959.98px) { :root { --bb-bottom-nav-height: 56px; } } /* ============================================================================= DARK MODE — first-class ramp (not an inverted light theme). True neutral surfaces, slightly lower-saturation accent, elevation via lighter surfaces + softer shadow. Opt-in via [data-theme="dark"]. Architecture-ready even if v1 ships light-only. ========================================================================== */ :root[data-theme="dark"] { --bb-gray-1: #0E1014; /* page */ --bb-gray-2: #15181E; /* card / raised */ --bb-gray-3: #1B1F27; /* subtle fill */ --bb-gray-4: #232833; --bb-gray-5: #2C323F; --bb-gray-6: #353C4A; /* border */ --bb-gray-7: #434B5B; --bb-gray-8: #5C6370; --bb-gray-9: #8A92A0; --bb-gray-10: #A8B0BD; /* secondary text */ --bb-gray-11: #CBD2DC; --bb-gray-12: #ECEFF3; /* primary text */ --bb-border: rgba(255, 255, 255, 0.10); --bb-border-strong: rgba(255, 255, 255, 0.18); --bb-border-subtle: rgba(255, 255, 255, 0.06); --bb-surface-page: var(--bb-gray-1); --bb-surface-card: var(--bb-gray-2); --bb-surface-raised: var(--bb-gray-3); --bb-surface-sunken: #0A0C10; --bb-surface-overlay: var(--bb-gray-3); /* accent slightly de-saturated for dark */ --bb-accent-7: #1FC0E2; --bb-accent: var(--bb-accent-7); --bb-accent-bg: rgba(31, 192, 226, 0.12); --bb-accent-ring: rgba(31, 192, 226, 0.42); --bb-success-bg: rgba(31, 157, 87, 0.16); --bb-success-border: rgba(31, 157, 87, 0.32); --bb-warning-bg: rgba(199, 122, 10, 0.16); --bb-warning-border: rgba(199, 122, 10, 0.32); --bb-danger-bg: rgba(220, 76, 76, 0.16); --bb-danger-border: rgba(220, 76, 76, 0.34); --bb-info-bg: rgba(45, 127, 240, 0.16); --bb-info-border: rgba(45, 127, 240, 0.34); --bb-shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30); --bb-shadow-lg: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); --bb-shadow-xl: 0 24px 48px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.06); --bb-shadow-focus: 0 0 0 2px var(--bb-surface-card), 0 0 0 4px var(--bb-accent-ring); } @media (prefers-reduced-motion: reduce) { :root { --bb-dur-instant: 0ms; --bb-dur-fast: 0ms; --bb-dur-pop: 0ms; --bb-dur-modal: 0ms; --bb-dur-route: 0ms; } }