/* BizsOn design tokens — the ONLY global stylesheet in the system. All module UI must read colors/spacing/typography from these vars. Light is the default. Metronic flips the .dark class on ; the existing data-theme hook is kept for server-side/theme-state callers. Per-tenant brand override is injected inline as --bz-brand-primary / --bz-brand-accent on by the TenantBrandOverride component so we never toggle classes. */ :root { /* Palette - light (cool, low-saturation enterprise neutrals) */ --bz-color-bg: #f5f7fa; --bz-color-surface: #ffffff; --bz-color-surface-2: #eef2f7; --bz-color-surface-3: #e3e9f1; --bz-color-fg: #0f172a; --bz-color-fg-muted: #475569; --bz-color-fg-subtle: #64748b; --bz-color-border: #d6dde6; --bz-color-border-strong: #b6c0cd; --bz-color-accent: #1f5fd8; --bz-color-accent-hover: #1a4fb8; --bz-color-accent-fg: #ffffff; --bz-color-danger: #c0392b; --bz-color-warn: #b07d16; --bz-color-ok: #1f7a3a; --bz-color-info: #1f5fd8; --bz-color-focus-ring: rgba(31, 95, 216, 0.35); /* Brand (overridable per tenant) */ --bz-brand-primary: var(--bz-color-accent); --bz-brand-primary-hover: var(--bz-color-accent-hover); --bz-brand-accent: var(--bz-color-accent); /* Compatibility aliases — several pages/components reference these shorthand names. They indirect to the canonical --bz-color-* tokens, so they automatically pick up the dark-mode values below (no duplication needed) and any code using them follows the theme. Prefer the --bz-color-* names in new code. */ --bz-text-1: var(--bz-color-fg); --bz-text-2: var(--bz-color-fg-muted); --bz-text-3: var(--bz-color-fg-subtle); --bz-text-muted: var(--bz-color-fg-muted); --bz-surface: var(--bz-color-surface); --bz-surface-2: var(--bz-color-surface-2); --bz-surface-3: var(--bz-color-surface-3); --bz-border: var(--bz-color-border); --bz-border-soft: var(--bz-color-border); --bz-primary: var(--bz-color-accent); --bz-primary-active: var(--bz-color-accent-hover); --bz-primary-600: var(--bz-color-accent); --bz-primary-50: color-mix(in srgb, var(--bz-color-accent) 14%, transparent); /* Radius */ --bz-radius-sm: 4px; --bz-radius-md: 8px; --bz-radius-lg: 14px; --bz-radius-pill: 999px; /* Spacing scale */ --bz-space-1: 4px; --bz-space-2: 8px; --bz-space-3: 12px; --bz-space-4: 16px; --bz-space-5: 24px; --bz-space-6: 32px; --bz-space-8: 48px; /* Type — Inter when available, otherwise fall back to the OS UI stack (Segoe UI Variable on Windows 11, San Francisco on macOS/iOS, Roboto on Android). Inter is NOT bundled; if a tenant wants to guarantee it, they can self-host the font and inject an @font-face via the TenantBrandOverride. Until then the fallback stack renders cleanly across all platforms. */ --bz-font-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --bz-font-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --bz-fs-xs: 12px; --bz-fs-sm: 13px; --bz-fs-md: 14px; --bz-fs-lg: 16px; --bz-fs-xl: 20px; --bz-fs-2xl: 28px; --bz-fs-3xl: 34px; --bz-fw-regular: 400; --bz-fw-medium: 500; --bz-fw-semibold: 600; --bz-fw-bold: 700; --bz-lh: 1.5; --bz-lh-tight: 1.25; /* Motion — durations by element weight, easings by intent. ease-out is the default: it starts fast, so the UI reacts in the exact moment the user is watching. Never ease-in on an entrance or a hover — it delays the first frame and reads as sluggish at identical duration. */ --bz-duration-press: 120ms; /* button press feedback */ --bz-duration-fast: 120ms; /* hover, color, small state changes */ --bz-duration-base: 180ms; /* dropdowns, popovers, toasts */ --bz-duration-slow: 280ms; /* modals, panels, drawers */ --bz-ease: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out — the default */ --bz-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* explicit alias for new code */ --bz-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movement across the screen */ --bz-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* sheets/panels, iOS-like */ /* Elevation — soft, layered shadows */ --bz-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04); --bz-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04); --bz-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14), 0 4px 10px rgba(15, 23, 42, .06); /* Layout */ --bz-nav-width: 260px; --bz-header-height: 56px; --bz-control-height: 32px; --bz-control-height-lg: 40px; } html.dark, html[data-theme="dark"] { --bz-color-bg: #0b111d; --bz-color-surface: #131a27; --bz-color-surface-2: #1a2233; --bz-color-surface-3: #232c40; --bz-color-fg: #e5ebf2; --bz-color-fg-muted: #97a3b3; --bz-color-fg-subtle: #6b7889; --bz-color-border: #2a3447; --bz-color-border-strong: #3a465c; --bz-color-accent: #4a8dff; --bz-color-accent-hover: #6aa2ff; --bz-color-accent-fg: #08111e; --bz-color-danger: #f07158; --bz-color-warn: #e0b250; --bz-color-ok: #57c07a; --bz-color-info: #4a8dff; --bz-color-focus-ring: rgba(74, 141, 255, 0.45); --bz-shadow-sm: 0 1px 2px rgba(0,0,0,.45); --bz-shadow-md: 0 4px 12px rgba(0,0,0,.50); --bz-shadow-lg: 0 16px 40px rgba(0,0,0,.60); } /* Reduced motion: movement and infinite loops stop; the opacity fades that carry meaning (a toast arriving, the activity bar) keep a short duration. Reduced motion means fewer and gentler animations, not zero — killing the fades too would make state changes jarring rather than calmer, so --bz-duration-base is deliberately left intact. */ @media (prefers-reduced-motion: reduce) { :root { --bz-duration-press: 1ms; --bz-duration-fast: 1ms; --bz-duration-slow: var(--bz-duration-base); } .bz-ai-chat-panel { animation: none; } .bz-progress-fill--indeterminate { animation: none; width: 100%; opacity: .55; } .bz-spinner { animation-duration: 1.6s; } } /* Respect OS preference when no explicit theme is chosen. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bz-color-bg: #0b111d; --bz-color-surface: #131a27; --bz-color-surface-2: #1a2233; --bz-color-surface-3: #232c40; --bz-color-fg: #e5ebf2; --bz-color-fg-muted: #97a3b3; --bz-color-fg-subtle: #6b7889; --bz-color-border: #2a3447; --bz-color-border-strong: #3a465c; --bz-color-accent: #4a8dff; --bz-color-accent-hover: #6aa2ff; --bz-color-accent-fg: #08111e; --bz-color-focus-ring: rgba(74, 141, 255, 0.45); } }