/* ============================================================ * ERP design tokens — single source of truth. * * Light theme is default (matches the Odoo / ERPNext look the * client asked for). Dark theme activates via `.theme-dark` on * . The legacy theme toggle in base_dashboard_layout.html * still uses `.theme-light`, so we alias both states below to * keep existing pages working until they migrate. * * Do NOT add per-page color literals. Pull from these tokens. * ============================================================ */ :root { /* === Color: surfaces === */ --erp-color-bg: #f6f8fa; --erp-color-surface: #ffffff; --erp-color-surface-2: #f0f3f6; --erp-color-surface-sunk: #e9edf1; --erp-color-border: #d0d7de; --erp-color-border-strong:#afb8c1; /* === Color: text === */ --erp-color-text: #1f2328; --erp-color-text-muted: #57606a; --erp-color-text-subtle: #8c959f; --erp-color-text-on-accent:#ffffff; /* === Color: semantic === * Wizcount-style corporate blue. Deeper than Odoo-purple, evokes * SAP B1 / Wizcount / classic ERP look. Soft tints used as badge * backgrounds. */ --erp-color-accent: #1f4e79; /* Wizcount-blue primary */ --erp-color-accent-hover: #173a5e; --erp-color-accent-soft: #e6eef7; --erp-color-info: #1f4e79; --erp-color-info-soft: #e6eef7; --erp-color-success: #1a7f37; --erp-color-success-soft: #e6f4ea; --erp-color-warning: #b08200; --erp-color-warning-soft: #fff5d6; --erp-color-danger: #b42d2d; --erp-color-danger-soft: #fbe6e6; /* === Spacing scale (4px base) === */ --erp-space-0: 0; --erp-space-1: 0.25rem; /* 4 */ --erp-space-2: 0.5rem; /* 8 */ --erp-space-3: 0.75rem; /* 12 */ --erp-space-4: 1rem; /* 16 */ --erp-space-5: 1.5rem; /* 24 */ --erp-space-6: 2rem; /* 32 */ --erp-space-7: 3rem; /* 48 */ /* === Radius === * Wizcount is square-cornered. Small radii give the corporate feel; * pills only for status chips. */ --erp-radius-xs: 2px; --erp-radius-sm: 3px; --erp-radius-md: 4px; --erp-radius-lg: 6px; --erp-radius-pill: 999px; /* === Typography === */ --erp-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --erp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --erp-text-xs: 0.75rem; --erp-text-sm: 0.85rem; --erp-text-base: 0.9375rem; --erp-text-lg: 1.0625rem; --erp-text-xl: 1.25rem; --erp-text-2xl: 1.5rem; --erp-leading-tight: 1.3; --erp-leading-base: 1.5; /* === Elevation === */ --erp-shadow-sm: 0 1px 2px rgba(15, 22, 36, 0.06); --erp-shadow-md: 0 4px 12px rgba(15, 22, 36, 0.08); --erp-shadow-lg: 0 16px 32px rgba(15, 22, 36, 0.12); --erp-shadow-modal: 0 24px 64px rgba(15, 22, 36, 0.24); /* === Motion === */ --erp-dur-fast: 120ms; --erp-dur-base: 180ms; --erp-dur-slow: 280ms; --erp-ease: cubic-bezier(0.16, 1, 0.3, 1); /* === Layout === */ --erp-sidebar-width: 240px; --erp-toolbar-height: 56px; --erp-z-toolbar: 30; /* page-level sticky toolbar */ --erp-z-drawer: 80; --erp-z-shell: 90; /* global topbar + its dropdowns (above page sticky) */ --erp-z-modal: 100; --erp-z-toast: 120; } /* Dark theme: triggered by either the new `.theme-dark` class or * the legacy absence of `.theme-light` (which is how * base_dashboard_layout.html still drives it). To keep the existing * toggle working we treat "no .theme-light class" as dark mode. */ html:not(.theme-light), html.theme-dark { --erp-color-bg: #0d1117; --erp-color-surface: #161b22; --erp-color-surface-2: #1f242c; --erp-color-surface-sunk: #0a0e13; --erp-color-border: #30363d; --erp-color-border-strong:#454c54; --erp-color-text: #e6edf3; --erp-color-text-muted: #8b949e; --erp-color-text-subtle: #6e7681; --erp-color-accent: #6ea8d8; --erp-color-accent-hover: #8bbde6; --erp-color-accent-soft: #14283d; --erp-color-info: #6ea8d8; --erp-color-info-soft: #14283d; --erp-color-success: #3fb950; --erp-color-success-soft: #133929; --erp-color-warning: #d29922; --erp-color-warning-soft: #3d2e04; --erp-color-danger: #f85149; --erp-color-danger-soft: #3a1313; --erp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --erp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --erp-shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55); --erp-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.7); } /* Compatibility aliases — legacy variables used across the app * point at the new tokens so old templates keep rendering until * they migrate. New code MUST use --erp-*. */ :root, html.theme-light, html.theme-dark, html:not(.theme-light) { --bg: var(--erp-color-bg); --surface: var(--erp-color-surface); --surface-2: var(--erp-color-surface-2); --border: var(--erp-color-border); --text: var(--erp-color-text); --muted: var(--erp-color-text-muted); --accent: var(--erp-color-info); /* legacy "accent" is the link-blue */ --accent-hover: var(--erp-color-accent-hover); --green: var(--erp-color-success); --red: var(--erp-color-danger); --radius: var(--erp-radius-lg); --shadow: var(--erp-shadow-lg); }