/* ============================================================================ tokens.css - THE THEME ENGINE Two layers, and the split is the whole point: Layer 1 ~16 SEEDS the only thing a reskin edits. Set them in a themes/*.css file, not here. Layer 2 ~62 ROLES derived from the seeds with color-mix(). Nobody edits these; they follow whatever the seeds say. Mixing happens in OKLCH, not sRGB, and that matters: white and black are achromatic, so their hue is POWERLESS in the mix and every stop inherits the seed's hue exactly. That is what stops a ramp drifting as it lightens. Each mix percentage below was SOLVED, not guessed - fitted against the colour this ERP actually shipped, so the default theme lands on the app's own palette. Needs color-mix(): Chrome 111+ / Safari 16.2+ / Firefox 113+ (all 2023). Older shop-floor tablets: load tokens-flat.css instead - same values, plain hex. ========================================================================== */ :root { /* -- Layer 1b . metric seeds ------------------------------------------ */ --seed-radius: 16px; --seed-sidebar-w: 240px; --seed-topbar-h: 65px; /* LOAD-BEARING - every sticky rail resolves against it (T4) */ --seed-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --seed-font-size: 14px; --seed-density: 1; /* RESERVED - declared, not yet wired. See README. */ /* -- Layer 3 . semantic aliases ------------------------------------------ The names this ERP's stylesheet already uses, pointed at ramp stops. Keeping them is what lets kit.css read like app.css, so a fix found in one file is portable to the other by hand. */ --surface: #fff; --card-bg: var(--surface); --page-bg: var(--n-100); --line: var(--n-100); --card-border: var(--n-250); --field-border: var(--n-300); --body: var(--n-800); --muted: var(--n-500); --faint: var(--n-400); --radius: var(--seed-radius); --radius-sm: calc(var(--seed-radius) - 6px); --radius-field: calc(var(--seed-radius) - 8px); --sidebar-w: var(--seed-sidebar-w); --topbar-h: var(--seed-topbar-h); --shadow-card: 0 1px 4px rgba(0,0,0,.04); --shadow-pop: 0 4px 16px rgba(0,0,0,.1); --calc-rail-top: calc(var(--seed-topbar-h) + 1rem); /* T4 */ } /* -- Layer 2 . derived roles ---------------------------------------------- */ :root { --n-25: color-mix(in oklch, var(--seed-neutral) 2%, #fff); --n-50: color-mix(in oklch, var(--seed-neutral) 4%, #fff); --n-100: color-mix(in oklch, var(--seed-neutral) 7%, #fff); --n-150: color-mix(in oklch, var(--seed-neutral) 9%, #fff); --n-200: color-mix(in oklch, var(--seed-neutral) 12%, #fff); --n-250: color-mix(in oklch, var(--seed-neutral) 16%, #fff); --n-300: color-mix(in oklch, var(--seed-neutral) 30%, #fff); --n-400: color-mix(in oklch, var(--seed-neutral) 65%, #fff); --n-500: var(--seed-neutral); --n-600: color-mix(in oklch, var(--seed-neutral) 80%, #000); --n-700: color-mix(in oklch, var(--seed-neutral) 67%, #000); --n-800: color-mix(in oklch, var(--seed-neutral) 51%, #000); --accent-50: color-mix(in oklch, var(--seed-accent) 8%, #fff); --accent-wash: color-mix(in oklch, var(--seed-accent) 7%, #fff); --accent-100: color-mix(in oklch, var(--seed-accent) 14%, #fff); --accent-200: color-mix(in oklch, var(--seed-accent) 27%, #fff); --accent-soft: color-mix(in oklch, var(--seed-accent) 44%, #fff); --accent-400: color-mix(in oklch, var(--seed-accent) 66%, #fff); --accent-500: color-mix(in oklch, var(--seed-accent) 85%, #fff); --accent: var(--seed-accent); --accent-dark: var(--seed-accent-dark); --ink-600: color-mix(in oklch, var(--seed-accent) 78%, #000); --ink-700: color-mix(in oklch, var(--seed-accent) 68%, #000); --ink-900: var(--seed-ink); --purple-50: color-mix(in oklch, var(--seed-purple) 7%, #fff); --accent-tint: color-mix(in oklch, var(--seed-purple) 12%, #fff); --purple-200: color-mix(in oklch, var(--seed-purple) 23%, #fff); --purple: var(--seed-purple); --purple-700: color-mix(in oklch, var(--seed-purple) 92%, #000); --violet-ink: color-mix(in oklch, var(--seed-purple) 81%, #000); --purple-900: color-mix(in oklch, var(--seed-purple) 70%, #000); --warn-bg: color-mix(in oklch, var(--seed-warn) 6%, #fff); --warn-100: color-mix(in oklch, var(--seed-warn) 13%, #fff); --warn-200: color-mix(in oklch, var(--seed-warn) 29%, #fff); --warn: var(--seed-warn); --warn-ink: color-mix(in oklch, var(--seed-warn) 86%, #000); --amber-50: color-mix(in oklch, var(--seed-amber) 8%, #fff); --amber-100: color-mix(in oklch, var(--seed-amber) 22%, #fff); --amber-200: color-mix(in oklch, var(--seed-amber) 40%, #fff); --amber: var(--seed-amber); --amber-700: color-mix(in oklch, var(--seed-amber) 73%, #000); --amber-800: color-mix(in oklch, var(--seed-amber) 61%, #000); --amber-900: color-mix(in oklch, var(--seed-amber) 55%, #000); --danger-bg: color-mix(in oklch, var(--seed-danger) 7%, #fff); --danger-100: color-mix(in oklch, var(--seed-danger) 15%, #fff); --danger-200: color-mix(in oklch, var(--seed-danger) 28%, #fff); --danger: var(--seed-danger); --danger-ink: color-mix(in oklch, var(--seed-danger) 88%, #000); --danger-800: color-mix(in oklch, var(--seed-danger) 77%, #000); --ok-50: color-mix(in oklch, var(--seed-ok) 6%, #fff); --ok-bg: color-mix(in oklch, var(--seed-ok) 14%, #fff); --ok-200: color-mix(in oklch, var(--seed-ok) 25%, #fff); --ok: var(--seed-ok); --ok-ink: color-mix(in oklch, var(--seed-ok) 84%, #000); --ok-800: color-mix(in oklch, var(--seed-ok) 71%, #000); --ok-900: color-mix(in oklch, var(--seed-ok) 62%, #000); --info-bg: color-mix(in oklch, var(--seed-info) 10%, #fff); --info-200: color-mix(in oklch, var(--seed-info) 21%, #fff); --info-ink: var(--seed-info); --info-700: color-mix(in oklch, var(--seed-info) 89%, #000); --series-pink-bg: color-mix(in oklch, var(--seed-pink) 12%, #fff); --series-pink-ink: color-mix(in oklch, var(--seed-pink) 78%, #000); --series-1: var(--seed-accent); --series-2: var(--seed-purple); --series-3: var(--seed-info); --series-4: var(--seed-ok); --series-5: var(--seed-warn); --series-6: var(--seed-danger); --series-7: var(--seed-pink); /* HAND-PATCH 2026-09-08 — an EIGHTH series colour, so the dashboard's KPI strip can carry eight tiles that are all different. --seed-amber is already declared by every theme and was the only seed the ramp did not use, so this costs no theme a new value and stays a TOKEN rather than a literal (R11). */ --series-8: var(--seed-amber); /* -- tinted alpha (see emit.php) ---------------------------------------- */ --accent-glow: color-mix(in srgb, var(--seed-accent) 25%, transparent); /* logo tile glow */ --accent-glow-strong: color-mix(in srgb, var(--seed-accent) 35%, transparent); /* sidebar brand glow */ --accent-ring: color-mix(in srgb, var(--seed-accent) 20%, transparent); /* focus ring */ --accent-ring-soft: color-mix(in srgb, var(--seed-accent) 12%, transparent); /* soft focus / hover ring */ --danger-ring: color-mix(in srgb, var(--seed-danger) 12%, transparent); /* destructive focus ring */ --shadow-ink: color-mix(in srgb, var(--n-800) 22%, transparent); /* dialog / popover shadow */ --shadow-deep: color-mix(in srgb, var(--n-800) 8%, transparent); /* deep card shadow */ }