/* ============================================================ INVENSE ERP — design tokens THE single source of truth. Loaded before every other sheet. Rules for anyone editing CSS in this project: 1. No stylesheet other than this one defines a raw colour. 2. No font-size outside the --fs-* ladder. Floor is 11px. 3. No padding/margin outside the --sp-* scale. 4. Colour carries meaning. A colour that decorates is a bug. See docs/DESIGN_SYSTEM.md for the reasoning. ============================================================ */ :root { /* ---- Brand ------------------------------------------------- --brand is the ONLY colour a customer sets. Everything else in the brand ramp is mixed from it, so one hex re-skins the app. The default reproduces the original INVENSE sidebar exactly. Overridden at runtime by the company profile (see base.html). */ --brand: #12343b; --brand-tint: #3a9ec9; /* the light end of the ramp */ --brand-900: color-mix(in srgb, var(--brand) 88%, #000000); --brand-800: color-mix(in srgb, var(--brand) 94%, #000000); --brand-700: var(--brand); --brand-600: color-mix(in srgb, var(--brand) 62%, var(--brand-tint)); --brand-500: color-mix(in srgb, var(--brand) 52%, var(--brand-tint)); --brand-300: color-mix(in srgb, var(--brand) 30%, #ffffff); --brand-100: color-mix(in srgb, var(--brand) 12%, #ffffff); --brand-050: color-mix(in srgb, var(--brand) 6%, #ffffff); /* Readable text on a --brand-700 fill, and the muted version of it. */ --on-brand: #ffffff; --on-brand-muted: color-mix(in srgb, #ffffff 66%, var(--brand-500)); /* Highlight on the dark sidebar -- the active nav icon. This used to be a hardcoded gold taken from the INVENSE logo, which stayed gold no matter what colour a customer picked. */ --on-brand-accent: color-mix(in srgb, var(--brand-tint) 70%, #ffffff); /* ---- Neutrals --------------------------------------------- Everything structural. Surfaces, borders, text, chrome. */ --n-0: #ffffff; --n-25: #fafbfc; --n-50: #f4f7f9; --n-100: #eef2f5; --n-200: #e2e8ed; --n-300: #cfd8e0; --n-400: #a8b6c2; --n-500: #7e8f9d; --n-600: #5f7383; --n-700: #455a6b; --n-800: #2d4152; --n-900: #17293a; /* ---- Status ------------------------------------------------ One value per role. There is no second green. Every pair clears 4.5:1 contrast. */ --success: #0f7a52; --success-bg: #e7f5ee; --success-line:#bfe3d2; --warning: #9a6300; --warning-bg: #fdf3df; --warning-line:#f0dcb0; --danger: #b4322e; --danger-bg: #fceceb; --danger-line: #f2c9c7; --info: #1a6f96; --info-bg: #e7f2f8; --info-line: #c4dced; /* ---- Semantic aliases -------------------------------------- Component CSS should reach for these, not the raw scales. */ --page: var(--n-50); --surface: var(--n-0); --surface-2: var(--n-25); --surface-3: var(--n-100); --line: var(--n-200); --line-strong: var(--n-300); --line-soft: var(--n-100); --text: var(--n-900); --text-body: var(--n-800); --text-soft: var(--n-600); --text-muted: var(--n-500); --text-invert: var(--n-0); --accent: var(--brand-600); /* primary action fill */ --accent-hover:var(--brand-700); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent); /* ---- Receivables ageing ------------------------------------- A sequential severity ramp, not five unrelated hues: the further right a bucket sits, the longer the money has been outstanding. Current is deliberately neutral, because money that is not yet due is not a problem. */ --age-0: var(--n-300); --age-1: #e0b062; --age-2: #d4893f; --age-3: #c25f33; --age-4: var(--danger); /* ---- Chart series ------------------------------------------- A categorical palette, read by charts.js so the charts are not a second design system. Desaturated to sit beside the neutral UI, and ordered so adjacent series stay distinguishable. Where a series has a natural meaning it reuses the status colour: money received is --success, money out is --danger. */ --chart-1: #1d6874; /* teal - sales */ --chart-2: #0f7a52; /* green - receipts (in) */ --chart-3: #9a6300; /* amber - expenses */ --chart-4: #b4322e; /* red - purchases (out) */ --chart-5: #3f7cad; /* blue - salaries */ --chart-6: #6a5aa8; /* violet - fixed costs */ --chart-7: #5f8f8a; --chart-8: #a8752f; --chart-positive: var(--success); --chart-negative: var(--danger); /* ---- Type --------------------------------------------------- Fixed ladder, 11px floor, no fractional sizes. */ --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-2xs: 11px; /* chips, badges, micro-meta — the floor */ --fs-xs: 12px; /* secondary meta, help text, eyebrows */ --fs-sm: 13px; /* table body, inputs, buttons */ --fs-md: 14px; /* body default */ --fs-lg: 16px; /* card and panel titles */ --fs-xl: 18px; /* section headings */ --fs-2xl: 20px; /* modal titles */ --fs-3xl: 26px; /* KPI values, page h1 */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --track-caps: 0.07em; /* letter-spacing for uppercase labels */ /* ---- Space (4px base) --------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ---- Radius -------------------------------------------------- */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ---- Elevation — two shadows, nothing else casts one --------- */ --shadow-sm: 0 1px 2px rgba(16, 40, 56, .06), 0 4px 14px rgba(16, 40, 56, .045); --shadow-md: 0 10px 34px rgba(12, 34, 48, .14); /* ---- Controls — one height so rows line up ------------------- */ --control-h: 36px; --control-h-sm: 30px; --control-h-lg: 42px; --sidebar-w: 264px; --topbar-h: 60px; --row-h: 40px; /* ---- Motion -------------------------------------------------- */ --ease: cubic-bezier(.2, 0, .2, 1); --dur: 140ms; } /* ---- Legacy aliases ------------------------------------------- app.css and kanban-board.css were written against the older names. Mapping them here means those sheets keep working while pointing at the unified values — and it removes the duplicate --green/--red/ --amber/--ink definitions that used to fight each other. */ :root { --page-deep: var(--n-100); --ink: var(--text); --ink-soft: var(--text-body); --muted: var(--text-soft); --muted-2: var(--text-soft); --canvas: var(--page); --brand-2: var(--brand-600); --teal: var(--brand-500); --green: var(--success); --green-bg: var(--success-bg); --amber: var(--warning); --amber-bg: var(--warning-bg); --red: var(--danger); --red-bg: var(--danger-bg); --violet: var(--info); --line-2: var(--line); --line-3: var(--line-soft); --navy-950: var(--brand-900); --navy-900: var(--brand-800); --navy-800: var(--brand-700); --navy-700: var(--brand-600); --blue-600: var(--accent); --blue-500: var(--brand-500); --cyan-100: var(--brand-050); --shadow: var(--shadow-md); --shadow-soft: var(--shadow-sm); --radius-sm: var(--r-sm); --radius: var(--r-lg); --radius-lg: var(--r-xl); --card-pad-x: var(--sp-4); --card-pad-y: var(--sp-3); }