/* ============================================================= CoreSync Construction — Design Tokens Extracted from: coresync_branding.css, coresync_login.css, coresync_sidebar.css, coresync_home.js, pm_dashboard.js, site_engineer_dashboard.js, finance_dashboard.js August 2026 ============================================================= USAGE RULE: All UI work must import this file. Use SEMANTIC tokens in component code — never reach for a primitive unless you are defining another token. Hard-coded color / font / radius / shadow values in UI code are prohibited once this file is loaded (see DESIGN_SYSTEM.md). ============================================================= */ :root { /* =========================================================== a. PRIMITIVES =========================================================== */ /* ── Brand palette: Navy family ─────────────────────────── */ /* #004368 — primary brand navy: sidebar, login panel, global brand #002D4E — deep navy: dashboard hero cards, button backgrounds These two navy variants co-exist intentionally (see DESIGN_SYSTEM.md §Conflict log for rationale). */ --color-navy-600: #004368; /* softer brand navy (sidebar, login, branding) */ --color-navy-900: #002D4E; /* deep navy (dashboard hero, primary buttons) */ --color-navy-hover: #005a8a; /* navy-600 hover (login primary button hover) */ --color-navy-mid: #007687; /* gradient midpoint (branding --cs-mid) */ /* ── Brand palette: Teal family ─────────────────────────── */ /* #008A8A — original brand teal: sidebar active, login accent #00A89D — vivid teal: dashboard buttons, spinners, focus states Two intentional teal variants — see §Conflict log. */ --color-teal-600: #008A8A; /* original brand teal (sidebar, login, branding) */ --color-teal-500: #00A89D; /* vivid teal (dashboard buttons, active states) */ --color-teal-400: #00C8BC; /* bright teal (hover on teal-500 elements) */ --color-teal-focus: rgba(0, 138, 138, 0.12); /* focus-ring alpha (teal-600) */ --color-teal-50: #d7f2f0; /* teal badge background (desk skin status pill) */ --color-teal-800: #00636b; /* teal badge text on --color-teal-50 */ /* ── Brand palette: Amber / Warning ─────────────────────── */ --color-amber-400: #F59E0B; /* amber base (KPI accent, warning progress) */ --color-amber-700: #b45309; /* amber badge text */ --color-amber-50: #fef3c7; /* amber badge background */ /* ── Brand palette: Red / Critical ──────────────────────── */ --color-red-500: #ef4444; /* critical / overrun border / DSR-missed dot */ --color-red-700: #b91c1c; /* red badge text */ --color-red-800: #dc2626; /* finance dashboard overdue text */ --color-red-50: #fee2e2; /* red badge background */ --color-red-faint: #fef2f2; /* finance overdue-critical row background */ /* ── Brand palette: Green / Healthy ─────────────────────── */ --color-green-500: #10B981; /* healthy / certified / in-flow dot */ --color-green-700: #047857; /* green badge text, money-positive */ --color-green-600: #059669; /* health-bar pos margin, alt green */ --color-green-50: #dcfce7; /* green badge background */ --color-green-faint: #f0fdf4; /* submitted-DSR banner background */ /* ── Brand palette: Blue (chart / secondary accents) ────── */ --color-blue-500: #3b82f6; /* progress-bar blue fill, AR column accent */ --color-blue-800: #1e40af; /* blue badge text */ --color-blue-50: #dbeafe; /* blue badge background */ /* ── Surface / Neutral ───────────────────────────────────── */ /* Drift noted: dashboards use #f0f4f8; branding.css uses #F0F7FA. --color-surface is the dashboard value (majority); --color-surface-alt is the branding value. Both are exposed so consuming code can pick the right context. New screens should use --color-surface. */ --color-surface: #f0f4f8; /* page / shell background (all 4 dashboards) */ --color-surface-alt: #F0F7FA; /* branding.css --cs-light (form pages) */ --color-card: #ffffff; /* card / panel face */ --color-card-alt: #f8fafc; /* alternating row, panel-header background */ --color-card-subtle: #f1f5f9; /* KPI foot border, progress track background */ /* ── Border scale ────────────────────────────────────────── */ /* Drift noted: #e8ecf0 (dashboards) vs #E2EBF0 (branding.css --cs-border). --color-border is the dashboard value (majority); --color-border-brand is the branding value. */ --color-border: #e8ecf0; /* card / panel outer border (all dashboards) */ --color-border-brand: #E2EBF0; /* branding.css --cs-border */ --color-border-inner: #eef2f6; /* panel-header bottom border */ --color-border-row: #f4f7fa; /* table row separator */ /* ── Text scale ──────────────────────────────────────────── */ --color-text-headline: #0f172a; /* page titles, KPI numerals */ --color-text-strong: #1e293b; /* panel titles, project names */ --color-text-body: #475569; /* row text, descriptions */ --color-text-label: #374151; /* form field labels, grid-cell text */ --color-text-secondary: #64748b; /* page subtitles, sub-labels */ --color-text-muted: #94a3b8; /* metadata, timestamps, empty-state copy */ /* ── Alpha tints ──────────────────────────────────────────────────────── Alpha cannot be derived from a hex primitive through var(), so these are primitives in their own right rather than semantics over the base colour. Added for the DT-004 BOQ Planned/Actual/Variance column bands. */ --color-on-navy-muted: rgba(255, 255, 255, 0.65); /* secondary text on navy */ --color-on-navy-faint: rgba(255, 255, 255, 0.50); /* tertiary text on navy */ --color-on-navy-rule: rgba(255, 255, 255, 0.12); /* hairline divider on navy */ --color-teal-tint-04: rgba(0, 168, 157, 0.04); /* teal-500 @ 4% — band fill */ --color-teal-tint-15: rgba(0, 168, 157, 0.15); /* teal-500 @ 15% — band rule */ --color-teal-tint-18: rgba(0, 168, 157, 0.18); /* teal-500 @ 18% — band header */ --color-navy-tint-04: rgba(0, 45, 78, 0.04); /* navy-900 @ 4% — band fill */ --color-navy-tint-12: rgba(0, 45, 78, 0.12); /* navy-900 @ 12% — band rule */ --color-text-white: #ffffff; /* on-navy or on-teal text */ /* ── Font stack ──────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* ── Spacing scale ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 28px; /* ── Radius scale ────────────────────────────────────────── */ --radius-sm: 4px; /* status chips, tiny badges */ --radius-md: 6px; /* buttons, inputs, small cards */ --radius-lg: 8px; /* panels, KPI cards, panels (majority surface) */ --radius-xl: 10px; /* branding-layer cards (--cs-radius) */ --radius-2xl: 14px; /* workspace shortcut / link-card tiles */ --radius-full: 9999px; /* pill-shaped badges */ /* ── Shadow levels ───────────────────────────────────────── */ --shadow-xs: 0 1px 4px rgba(0, 67, 104, 0.06); /* subtle card lift */ --shadow-sm: 0 2px 8px rgba(0, 67, 104, 0.08); /* standard card (--cs-shadow) */ --shadow-md: 0 4px 12px rgba(0, 67, 104, 0.12); /* hovered panel */ --shadow-lg: 0 8px 24px rgba(0, 67, 104, 0.14); /* shortcut tile hover */ --shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.18); /* persistent sidebar */ /* =========================================================== b. SEMANTIC TOKENS Construction-ERP meaning layer — components MUST use these. Each maps to a primitive defined above. =========================================================== */ /* ── Health / project status ─────────────────────────────── */ --status-healthy: var(--color-green-500); /* on track, below budget */ --status-warning: var(--color-amber-400); /* approaching limit, watch */ --status-overrun: var(--color-red-500); /* cost overrun, critical delay */ --status-certified: var(--color-green-500); /* payment certified, approved */ /* ── Flag severity (decision-queue left-border, alert ribbon) */ /* ── Column bands (DT-004 BOQ grid) ───────────────────────────────────── Planned reads teal, Actual reads neutral navy. Amber and red are NOT used to identify a column: they are severity colours (DESIGN_SYSTEM.md §Color-Meaning Law) and spending them on column identity would leave the at-risk row with nothing louder than its neighbours. Variance is the one place severity is legitimate, because an overrun IS the warning. */ --band-planned-bg: var(--color-teal-tint-04); --band-planned-rule: var(--color-teal-tint-15); --band-planned-head: var(--color-teal-tint-18); --band-actual-bg: var(--color-navy-tint-04); --band-actual-rule: var(--color-navy-tint-12); --band-actual-head: var(--color-on-navy-rule); --band-variance-over: var(--status-overrun); --band-variance-under: var(--color-teal-600); --band-variance-zero: var(--color-text-muted); --flag-amber: var(--color-amber-400); /* medium severity — action needed */ --flag-red: var(--color-red-500); /* high severity — escalate now */ /* ── Approval chain ──────────────────────────────────────── */ --chain-pending: var(--color-amber-400); /* awaiting approval */ --chain-approved: var(--color-green-500); /* approved in workflow chain */ /* ── Money direction ─────────────────────────────────────── */ --money-positive: var(--color-green-700); /* receivable, inflow, certified */ --money-negative: var(--color-red-700); /* payable, outflow, overrun */ /* ── DSR submission ──────────────────────────────────────── */ --dsr-submitted: var(--color-green-500); /* today's DSR filed */ --dsr-missed: var(--color-red-500); /* no DSR filed — action needed */ /* =========================================================== c. COMPONENT TOKENS Repeated measurements extracted from real dashboard patterns. =========================================================== */ /* ── Card ────────────────────────────────────────────────── */ --card-padding-sm: 12px 14px; /* KPI card body */ --card-padding-md: 14px 18px; /* health-bar, standard panel content */ --card-padding-lg: 18px 20px; /* hero card (site-engineer) */ /* ── Status chip / badge ─────────────────────────────────── */ --chip-padding: 3px 7px; /* standard badge padding */ --chip-font-size: 9px; /* badge label font size */ --chip-font-weight: 700; /* badge label font weight */ --chip-radius: var(--radius-sm); /* 4px — matches majority usage */ /* Status chip color sets (bg / text pairs) */ --chip-green-bg: var(--color-green-50); --chip-green-text: var(--color-green-700); --chip-amber-bg: var(--color-amber-50); --chip-amber-text: var(--color-amber-700); --chip-red-bg: var(--color-red-50); --chip-red-text: var(--color-red-700); --chip-blue-bg: var(--color-blue-50); --chip-blue-text: var(--color-blue-800); --chip-grey-bg: var(--color-card-subtle); --chip-grey-text: var(--color-text-secondary); /* Teal chip — "done, but the money has not moved yet": certified / approved states on Progress Claim and Payment Certificate. Added with the desk skin because that lifecycle needs a step between blue (in motion) and green (terminal) that is NOT amber. See DESIGN_SYSTEM.md §3.10. */ --chip-teal-bg: var(--color-teal-50); --chip-teal-text: var(--color-teal-800); /* D42 -- the CLOSED project chip. A closed project is FINAL and its books are shut; that is neither a severity (amber/red are reserved) nor "no signal" (grey already carries Cancelled, and an abandoned project must not read like a delivered one), nor is it blue, which Completed holds and which means practical completion WITH the ledger still open. Navy is the structural brand colour and CLAUDE.md permits it for non-severity use. */ --chip-navy-bg: var(--color-navy-tint-12); --chip-navy-text: var(--color-navy-900); /* ── Hero numerals ───────────────────────────────────────── */ --hero-numeral-xl: 26px; /* health-bar metric, project-hero stats */ --hero-numeral-lg: 22px; /* KPI card value, site-engineer hero stat */ --hero-numeral-md: 18px; /* secondary numeric displays */ /* ── Panel header ────────────────────────────────────────── */ --panel-header-padding: 11px 13px; /* majority panel-hd padding */ --panel-header-font: 700 11px/1 var(--font-sans); /* ── Progress bar ────────────────────────────────────────── */ --progress-height: 4px; /* project table inline progress bar */ --progress-radius: 2px; --progress-track-bg: var(--color-card-subtle); /* #f1f5f9 */ /* ── DSR calendar circle ─────────────────────────────────── */ --cal-circle-size: 56px; /* site-engineer DSR day circle */ /* ── Sidebar width ───────────────────────────────────────── */ --sidebar-width: 220px; /* ── Grid design system (docs/design/grid-system) ─────────── */ /* One visual language for the three grid surfaces: the child table in a form, the list view, and the report DataTable, plus a dense variant. Values come from docs/design/grid-system/README.md. Where the README's hex already exists as a primitive above, the token REFERENCES it rather than restating it -- so navy stays one colour, not two. HEADER COLOUR (operator ruling 2026-08-29, IMPLEMENTATION.md): the band is NAVY. .navbar uses --cs-primary (#004368 = --color-navy-600); the README's #002D4E is --color-navy-900, already defined above. Teal is the ACCENT and is used for focus rings only -- never the band. FONTS: the README's --cs-grid-font-family / --cs-grid-font-numeric are deliberately ABSENT. IMPLEMENTATION.md drops them; grids inherit the app font (--font-sans) and numeric columns get tabular-nums on that face. */ /* type */ --cs-grid-body-size: 13px; --cs-grid-line-height: 1.35; /* Arabic ascenders/diacritics need it */ /* header */ --cs-grid-header-bg: var(--color-navy-900); --cs-grid-header-fg: var(--color-text-white); --cs-grid-header-bg-light: #f8fafc; --cs-grid-header-fg-light: #475569; --cs-grid-header-h: 34px; --cs-grid-header-size: 11px; --cs-grid-header-weight: 600; --cs-grid-header-tracking: 0.08em; --cs-grid-header-transform: uppercase; --cs-grid-header-active-bg: #0a4468; /* sorted column, a step off navy-900 */ --cs-grid-sort-caret: rgba(255, 255, 255, 0.35); /* rows */ --cs-grid-row-h: 36px; --cs-grid-row-h-dense: 30px; --cs-grid-row-h-two-line: 46px; --cs-grid-cell-pad-x: 12px; --cs-grid-cell-pad-x-dense: 8px; /* surfaces & states */ --cs-grid-surface: #ffffff; --cs-grid-zebra: #f5fafc; --cs-grid-hover: #e9f2f7; --cs-grid-selected: #e8f4f4; --cs-grid-selected-bar: var(--color-navy-600); --cs-grid-focus: var(--color-teal-600); /* accent, per ruling */ --cs-grid-skeleton: #eef2f6; /* borders & ink */ --cs-grid-border: var(--color-border); /* #e8ecf0 exact */ --cs-grid-border-vertical: var(--color-border-row); /* #f4f7fa exact */ --cs-grid-border-strong: #dce3ea; --cs-grid-frozen-edge: #b6c2ce; --cs-grid-ink: #1e293b; --cs-grid-ink-muted: #64748b; --cs-grid-ink-negative: var(--color-red-700); /* #b91c1c exact */ --cs-grid-ink-link: var(--color-navy-600); /* progress bar + row action */ --cs-grid-progress-track: var(--color-border); --cs-grid-progress-h: 4px; --cs-grid-progress-ok: #10b981; --cs-grid-progress-warn: var(--color-amber-400); /* #F59E0B exact */ --cs-grid-progress-over: #ef4444; --cs-grid-action-bg: var(--color-navy-900); --cs-grid-action-fg: var(--color-text-white); /* status pills -- the single source the JS indicator map resolves against */ --cs-grid-status-radius: var(--radius-sm); /* 4px exact */ --cs-grid-status-size: 11px; --cs-grid-status-draft-bg: #f1f5f9; --cs-grid-status-draft-fg: #64748b; --cs-grid-status-submitted-bg: #dbeafe; --cs-grid-status-submitted-fg: #1e40af; --cs-grid-status-approved-bg: #dcfce7; --cs-grid-status-approved-fg: #047857; --cs-grid-status-active-bg: #dff1f1; --cs-grid-status-active-fg: #007687; --cs-grid-status-paid-bg: #c9eedc; --cs-grid-status-paid-fg: #04653f; --cs-grid-status-certified-bg: #e4edf4; --cs-grid-status-certified-fg: var(--color-navy-600); --cs-grid-status-cancelled-bg: #e8ecf0; --cs-grid-status-cancelled-fg: #475569; --cs-grid-status-rejected-bg: #fee2e2; --cs-grid-status-rejected-fg: var(--color-red-700); /* grid min-widths -- fixed layout + h-scroll rather than shrinking type */ --cs-grid-minw-child: 980px; --cs-grid-minw-list: 1240px; --cs-grid-minw-report: 1250px; --cs-grid-minw-dense: 1400px; --cs-grid-dense-max-h: 480px; --cs-grid-frozen-col-w: 120px; }