/* ---- Design tokens (ARCHITECTURE.md §3.2) ----------------------------------------------------- The shared vocabulary both sites size, space and color themselves from. Loaded by every host before its own app.css, so a host still wins where it deliberately disagrees. PURELY DECLARATIVE. There is not one element selector in this file, so adding the changes nothing on screen until something asks for a token. That is what lets this ship ahead of the screens that use it. --cv-, NOT --carvin-. The Portal's own app.css already defines --carvin-ink, --carvin-accent and five more on :root, and it loads after this file - so reusing that prefix would have this layer silently overwritten on one of the two sites it exists to unify. LIGHT AND DARK, and nothing else. The host stamps data-carvin-scheme on ; a component may not ask which theme is running, because AppTheme lives in a module and shared UI may not reference one (FRAMEWORK.md §3.3). An attribute is the whole interface. */ :root, :root[data-carvin-scheme="light"] { color-scheme: light; /* Type. 13px base is a deliberate density choice for screens somebody works in all day; the applicant portal deliberately does not use it and sets its own larger body size. */ --cv-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --cv-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace; --cv-text-xs: 11px; --cv-text-sm: 12px; --cv-text-base: 13px; --cv-text-lg: 15px; --cv-text-xl: 18px; --cv-leading: 1.35; --cv-weight-normal: 400; --cv-weight-medium: 500; --cv-weight-semibold: 600; --cv-weight-bold: 700; /* Space. One scale, so gaps between cards, fields and toolbar groups agree. */ --cv-space-1: 4px; --cv-space-2: 8px; --cv-space-3: 12px; --cv-space-4: 16px; --cv-space-5: 20px; --cv-space-6: 24px; --cv-radius-sm: 4px; --cv-radius-md: 6px; --cv-radius-lg: 10px; /* Control and row geometry. The grid contract reads these rather than hard-coding pixels, so density is tuned in one place instead of per screen. 24px is a working density, not a cramped one: it is what somebody reviewing a branch queue all day wants, and it is why the portal's one grid opts out with .carvin-grid--roomy rather than inheriting a decision made for staff. */ --cv-control-height: 28px; --cv-row-height: 24px; --cv-header-height: 29px; --cv-cell-pad-y: 2px; --cv-cell-pad-x: 8px; /* NO FLOOR, deliberately. Blueprint forces its grids to 1440px so columns are never crammed, which works there because its grids have the columns to fill it. Ours do not - the companies grid sums to about 800px - and a forced floor does not create empty margin, it hands the leftover width to whichever column has no explicit width. On companies that was the command column, which rendered two icons in six hundred pixels of nothing. Columns carry their own widths and .carvin-grid-scroller scrolls when they genuinely exceed the viewport, so nothing is crammed without this. Set it per grid if one ever needs a floor. */ --cv-grid-min-width: 0; /* Color. THE STAFFILY PALETTE (#227, ADR-0031), from the website's src/styles/global.css so the product and www.staffily.net look like one company. Navy is the accent - buttons, links, the active navigation item, focus - and CarvinThemes hands the same value to DevExpress, so its chrome and ours agree. Change one and change the other; StaffilyPaletteTests holds them equal. ORANGE IS FOR PAGE TITLES ONLY (Carvin, 2026-10-16). The admin screens are dense working screens and orange section headings would get busy. Which orange depends on the ground: the logo orange #dd7434 fails on the grey page even as large text, so a title on the page takes the darker #b3561e and only a title on a white surface takes the logo orange. MEASURED (WCAG 2.x relative luminance, 2026-10-16; tests/Unit/StaffilyPaletteTests re-measures every pair below from this file, so a changed hex that breaks one fails the build): --cv-accent #12305b on --cv-surface #ffffff 13.13 text, AA --cv-accent #12305b on --cv-page #f4f6f9 12.13 text, AA --cv-accent-contrast #fff on --cv-accent 13.13 button text, AA --cv-accent-strong #0d2445 on --cv-surface 15.49 hover, AA --cv-title #b3561e on --cv-page #f4f6f9 4.55 page title, AA even as body text --cv-title-on-surface #dd7434 on --cv-surface 3.17 title on white, AA LARGE ONLY (h1) (#dd7434 on --cv-page would be 2.93 - fails even the 3:1 large-text minimum.) THE PAGE GREY IS THE WEBSITE'S ink-50, #f4f6f9 (was #f0f2f5). #b3561e measures 4.39 on the old grey and 4.55 on this one - the brand's rule was measured against ink-50, so the page takes ink-50 rather than the title taking a third orange. */ --cv-accent: #12305b; --cv-accent-strong: #0d2445; --cv-accent-contrast: #ffffff; --cv-orange: #dd7434; --cv-orange-strong: #b3561e; /* Text on a solid --cv-orange-strong badge: white on #b3561e measures 4.92. */ --cv-orange-contrast: #ffffff; --cv-title: var(--cv-orange-strong); --cv-title-on-surface: var(--cv-orange); --cv-text: #1b1b1f; --cv-text-soft: #424250; --cv-text-muted: #616170; --cv-surface: #ffffff; --cv-surface-subtle: #f5f6f8; --cv-surface-hover: #eceef2; --cv-page: #f4f6f9; --cv-input-bg: #ffffff; --cv-border: #d1d3d9; --cv-border-strong: #b0b3bc; --cv-success-bg: #e3f5e8; --cv-success-text: #0e6b31; --cv-warning-bg: #fdf3d8; --cv-warning-text: #8a5700; --cv-danger-bg: #fdeaea; --cv-danger-text: #b3261e; /* Row states. A percentage mix rather than a fixed tint, so both stay legible if the accent moves. */ --cv-row-hover: color-mix(in srgb, var(--cv-accent) 9%, var(--cv-surface)); --cv-row-selected: color-mix(in srgb, var(--cv-accent) 6%, var(--cv-surface)); --cv-focus-ring: color-mix(in srgb, var(--cv-accent) 30%, transparent); --cv-invalid-ring: color-mix(in srgb, var(--cv-danger-text) 22%, transparent); --cv-shadow: 0 1px 3px rgba(27, 27, 31, 0.10); --cv-shadow-raised: 0 8px 24px rgba(27, 27, 31, 0.16); } /* Only the tokens whose ROLE changes are redefined. Anything absent here - the whole type scale, the space scale, every geometry value - deliberately carries over, so a spacing decision is made once rather than twice and cannot drift between schemes. */ :root[data-carvin-scheme="dark"] { color-scheme: dark; /* THE SAME TWO COLORS, LIFTED FOR A DARK GROUND (#227). Navy-800 is 1.25:1 on #1f1f24 - it would vanish - so dark mode takes the website's navy-300 as its accent and navy-200 for hover, with dark text on a navy button. The logo orange already passes on both dark grounds, so it is the title on page and surface alike; #b3561e would fall to 3.33 on the surface. MEASURED (WCAG 2.x, 2026-10-16; re-measured by tests/Unit/StaffilyPaletteTests): --cv-accent #8eaad3 on --cv-surface #1f1f24 6.91 text, AA --cv-accent #8eaad3 on --cv-page #17171b 7.53 text, AA --cv-accent #8eaad3 on --cv-surface-subtle 6.33 text, AA --cv-accent-contrast #0b1120 on --cv-accent 7.93 button text, AA --cv-accent-strong #b8cbe6 on --cv-surface 9.94 hover, AA --cv-title #dd7434 on --cv-page #17171b 5.64 page title, AA --cv-title-on-surface #dd7434 on --cv-surface 5.17 title on a panel, AA */ --cv-accent: #8eaad3; --cv-accent-strong: #b8cbe6; --cv-accent-contrast: #0b1120; --cv-orange: #dd7434; --cv-orange-strong: #dd7434; /* Dark text on the brighter dark-mode orange: white on #dd7434 is only 3.17, too faint for small text. */ --cv-orange-contrast: #0b1120; --cv-title: var(--cv-orange); --cv-title-on-surface: var(--cv-orange); --cv-text: #f2f2f4; --cv-text-soft: #d6d6dd; --cv-text-muted: #a6a6b2; --cv-surface: #1f1f24; --cv-surface-subtle: #26262d; --cv-surface-hover: #2f2f38; --cv-page: #17171b; --cv-input-bg: #1a1a1f; --cv-border: #3b3b45; --cv-border-strong: #55555f; --cv-success-bg: #10331d; --cv-success-text: #6ddb92; --cv-warning-bg: #3a2a08; --cv-warning-text: #ffc95c; --cv-danger-bg: #3d1614; --cv-danger-text: #ff9a94; --cv-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); --cv-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.55); }