/* ============================================================================ AVFX CRM — DERIVED TOKENS ---------------------------------------------------------------------------- Layer 2 of 4. NOBODY EDITS THIS FILE BY HAND. It is arithmetic. Every hover, pressed, tinted, bordered and disabled variant is calculated here by mixing the theme's base colours towards --t-bg or --t-fg. This is what makes brand.css genuinely "one file": you change a seed, and five or six variants of it move correctly without anyone picking shades. Loaded AFTER the theme files. Custom properties resolve at use time, so a value defined here always sees the active theme's base colour. ========================================================================== */ :root { /* ================================================================== COLOUR VARIANTS -hover slightly stronger -active stronger still -subtle pale tinted fill -border readable edge on subtle ================================================================== */ --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, var(--t-fg)); --color-primary-active: color-mix(in srgb, var(--color-primary) 72%, var(--t-fg)); --color-primary-subtle: color-mix(in srgb, var(--color-primary) 10%, var(--t-bg)); --color-primary-border: color-mix(in srgb, var(--color-primary) 38%, var(--t-bg)); --color-success-hover: color-mix(in srgb, var(--color-success) 85%, var(--t-fg)); --color-success-subtle: color-mix(in srgb, var(--color-success) 12%, var(--t-bg)); --color-success-border: color-mix(in srgb, var(--color-success) 36%, var(--t-bg)); --color-danger-hover: color-mix(in srgb, var(--color-danger) 85%, var(--t-fg)); --color-danger-active: color-mix(in srgb, var(--color-danger) 72%, var(--t-fg)); --color-danger-subtle: color-mix(in srgb, var(--color-danger) 12%, var(--t-bg)); --color-danger-border: color-mix(in srgb, var(--color-danger) 36%, var(--t-bg)); --color-warning-hover: color-mix(in srgb, var(--color-warning) 85%, var(--t-fg)); --color-warning-subtle: color-mix(in srgb, var(--color-warning) 12%, var(--t-bg)); --color-warning-border: color-mix(in srgb, var(--color-warning) 36%, var(--t-bg)); --color-info-subtle: color-mix(in srgb, var(--color-info) 10%, var(--t-bg)); --color-info-border: color-mix(in srgb, var(--color-info) 36%, var(--t-bg)); --color-neutral-subtle: color-mix(in srgb, var(--color-neutral) 12%, var(--t-bg)); --color-neutral-border: color-mix(in srgb, var(--color-neutral) 34%, var(--t-bg)); --color-purple-subtle: color-mix(in srgb, var(--color-purple) 12%, var(--t-bg)); --color-purple-border: color-mix(in srgb, var(--color-purple) 34%, var(--t-bg)); --color-brand-hover: color-mix(in srgb, var(--color-brand) 85%, var(--t-fg)); --color-brand-subtle: color-mix(in srgb, var(--color-brand) 10%, var(--t-bg)); /* --- TEXT ON A TINTED FILL ------------------------------------------- A badge sets its label in the role colour on that role's pale tint. The solid colour is chosen to look right as a FILL, and at badge size (10px) it often lands just under the 4.5:1 readability minimum — orange and green especially. These are the same hue pushed further from the page, used for text only. Light theme pushes towards black, dark towards white, automatically, because --t-fg already knows which way that is. */ --color-success-fg: color-mix(in srgb, var(--color-success) 74%, var(--t-fg)); --color-danger-fg: color-mix(in srgb, var(--color-danger) 80%, var(--t-fg)); --color-warning-fg: color-mix(in srgb, var(--color-warning) 68%, var(--t-fg)); --color-info-fg: color-mix(in srgb, var(--color-info) 82%, var(--t-fg)); --color-neutral-fg: color-mix(in srgb, var(--color-neutral) 78%, var(--t-fg)); --color-purple-fg: color-mix(in srgb, var(--color-purple) 80%, var(--t-fg)); /* Focus ring — must be visible on white, on charcoal chrome, and inside coloured buttons. Checked against all three. */ --color-focus: var(--color-primary); --focus-ring: 0 0 0 2px var(--t-bg), 0 0 0 4px var(--color-focus); --focus-ring-inset: inset 0 0 0 2px var(--color-focus); /* ================================================================== MONEY — semantic aliases so a component never asks for "green" ================================================================== */ --color-money-positive: var(--color-success); --color-money-negative: var(--color-danger); --color-money-neutral: var(--color-text-tertiary); /* ================================================================== SPACING — every value is a multiple of --seed-space (4px) ================================================================== */ --space-0: 0; --space-1: calc(var(--seed-space) * 0.5); /* 2px */ --space-2: var(--seed-space); /* 4px */ --space-3: calc(var(--seed-space) * 1.5); /* 6px */ --space-4: calc(var(--seed-space) * 2); /* 8px */ --space-5: calc(var(--seed-space) * 3); /* 12px */ --space-6: calc(var(--seed-space) * 4); /* 16px */ --space-7: calc(var(--seed-space) * 5); /* 20px */ --space-8: calc(var(--seed-space) * 6); /* 24px */ --space-9: calc(var(--seed-space) * 8); /* 32px */ --space-10: calc(var(--seed-space) * 10); /* 40px */ --space-11: calc(var(--seed-space) * 12); /* 48px */ /* ================================================================== RADIUS ================================================================== */ --radius-xs: calc(var(--seed-radius) * 0.5); /* 2px badges, chips */ --radius-sm: var(--seed-radius); /* 4px inputs, buttons*/ --radius-md: calc(var(--seed-radius) * 1.5); /* 6px cards, menus */ --radius-lg: calc(var(--seed-radius) * 2); /* 8px modals, panels */ --radius-full: 999px; /* ================================================================== TYPE — scale derived from --seed-font-size (13px) ================================================================== */ --font-family: var(--seed-font), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-3xs: calc(var(--seed-font-size) - 4px); /* 10px micro badges */ --fs-2xs: calc(var(--seed-font-size) - 2px); /* 12px column headers */ --fs-xs: calc(var(--seed-font-size) - 1px); /* 13px GRID CELL DEFAULT */ --fs-sm: var(--seed-font-size); /* 14px BODY DEFAULT */ --fs-md: calc(var(--seed-font-size) + 1px); /* 15px emphasis */ --fs-lg: calc(var(--seed-font-size) + 3px); /* 17px section heading */ --fs-xl: calc(var(--seed-font-size) + 7px); /* 21px page title */ --fs-2xl: calc(var(--seed-font-size) + 11px); /* 25px key figures */ --fs-3xl: calc(var(--seed-font-size) + 19px); /* 33px hero figure */ --lh-tight: 1.25; --lh-base: 1.45; --lh-loose: 1.6; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ================================================================== DENSITY Default is now "default", not "compact" — changed 2026-08-08 because the product owner found the interface too tight. Compact is still available for operators who want more rows on screen. ================================================================== */ --row-h: 36px; --cell-pad-x: var(--space-5); --grid-head-h: 34px; --ctl-h-xs: 24px; --ctl-h-sm: 30px; --ctl-h-md: 34px; --ctl-h-lg: 40px; /* ================================================================== SHELL GEOMETRY ================================================================== */ --topbar-h: 54px; --sidebar-w: 248px; --sidebar-w-collapsed: 52px; --nav-item-h: 38px; --page-header-h: 52px; --logo-h: 28px; /* ================================================================== MOTION — nothing exceeds 300ms, ever ================================================================== */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 300ms; --ease-out: cubic-bezier(.2, .8, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --z-sticky: 100; --z-dropdown: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; } /* Density variants — the user may switch, and the choice is remembered. "default" is the base above; these two are the alternatives. */ :root[data-density="compact"] { --row-h: 30px; --cell-pad-x: var(--space-4); --grid-head-h: 30px; --ctl-h-xs: 22px; --ctl-h-sm: 26px; --ctl-h-md: 30px; --ctl-h-lg: 36px; --nav-item-h: 32px; } :root[data-density="comfortable"] { --row-h: 44px; --cell-pad-x: var(--space-6); --grid-head-h: 40px; --ctl-h-xs: 26px; --ctl-h-sm: 32px; --ctl-h-md: 38px; --ctl-h-lg: 44px; --nav-item-h: 44px; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }