/* ============================================================ CB5 PSA Design Tokens Source of truth for all UI styling — Blazor and React. Both frontends reference these variables. ============================================================ */ :root { /* --- Brand Colors --- */ --cb5-brand: #0083B1; --cb5-brand-accent: #F57F26; /* CB5 logo orange — selection / active accent */ --cb5-brand-accent-subtle: #FFF3E9; /* light-orange fill for selected surfaces */ --cb5-primary: #0066CC; --cb5-primary-hover: #0052A3; --cb5-primary-light: #E6F0FA; --cb5-accent: #00A86B; --cb5-accent-hover: #008F5A; /* --- Neutral Palette --- */ --cb5-bg: #FFFFFF; --cb5-bg-secondary: #F7F8FA; --cb5-bg-subtle: #FAFAFA; /* faintest inset fill; darkens with the theme */ --cb5-surface: #FFFFFF; --cb5-surface-raised: #F0F2F5; --cb5-border: #E2E6EA; --cb5-border-strong: #C8CDD4; --cb5-divider: #EAECEF; /* --- Text --- */ --cb5-text-primary: #1A1D23; --cb5-text-secondary: #5A6270; --cb5-text-tertiary: #8C95A2; --cb5-text-muted: #8C95A2; --cb5-text-on-primary: #FFFFFF; --cb5-text-link: #0066CC; /* --- Status Colors --- */ --cb5-success: #00A86B; --cb5-success-bg: #E6F7F1; --cb5-warning: #F59E0B; --cb5-warning-bg: #FEF3C7; --cb5-error: #DC2626; --cb5-error-bg: #FEE2E2; --cb5-info: #0066CC; --cb5-info-bg: #E6F0FA; /* Aliases — `danger` is used by delete/destructive affordances and is the same concept as `error`. Defined (rather than left to a var() fallback) because an undefined custom property makes the whole declaration invalid and it is silently dropped: `.cb5-icon-btn--danger:hover` was rendering a grey icon on a red fill. */ --cb5-danger: var(--cb5-error); --cb5-danger-bg: var(--cb5-error-bg); /* RGB channel triplets — for rgba() tints where only the alpha varies (count cards, tinted rows). Keep in lockstep with the hex values above; a mismatch shows up as a tint that is subtly the wrong hue. */ --cb5-primary-rgb: 0, 102, 204; --cb5-success-rgb: 0, 168, 107; --cb5-warning-rgb: 245, 158, 11; --cb5-error-rgb: 220, 38, 38; /* Status FOREGROUNDS — readable text sitting on the matching *-bg fill above. Distinct from --cb5-success/warning/error, which are the saturated fills used for solid badges and icons. */ --cb5-success-fg: #166534; --cb5-warning-fg: #92400E; --cb5-warning-border: #FBD88B; /* 1px rule on a --cb5-warning-bg fill */ --cb5-error-fg: #991B1B; --cb5-error-fg-strong: #7F1D1D; /* One warning foreground, not four. The codebase had six drifting ambers (#B45309 #92610C #8B6914 #92400E #7C4F0A #B5852A). Measured against --cb5-warning-bg they formed only two contrast tiers (~4.5:1 and ~6.3:1) plus one failure (#B5852A at 2.97:1, used on 11px text) — the variation was hue drift, not hierarchy, and in .lvf-adjust it was inverted: body text had MORE contrast than the interactive controls beside it. #92400E is the highest-contrast of the set (6.37:1 on the amber fill, 7.5:1 on white) and is the single text amber. De-emphasis is expressed with weight and size, never by dropping below AA. --cb5-warning stays saturated and is FILL-ONLY: backgrounds, dots, borders. It is 1.93:1 on its own tint and 2.2:1 on white, so it must never be used for text or for a meaningful icon. */ /* Muted blue for secondary chip text (filter operators, typeahead chips). */ --cb5-primary-soft: #4D86C7; /* --- Module accents (nav icons, module-chooser cards) --- Also emitted from NavConfiguration.cs as var() references, so these are the single definition for both the stylesheet and the C# nav model. */ --cb5-module-main: #0083B1; --cb5-module-deliver: #E07B2A; --cb5-module-engage: #00956A; --cb5-module-reach: #7048E8; --cb5-module-recruit: #7048E8; /* was referenced by UpcomingInterviewsCard but never defined */ /* --- Log levels (admin log viewer; severity ramp, not the status palette) --- */ --cb5-log-error: #DC2626; --cb5-log-warning: #D97706; --cb5-log-info: #2563EB; --cb5-log-debug: #7C3AED; --cb5-log-verbose: #6B7280; /* Brand gradient companion — the darker stop in the header/hero gradient. */ --cb5-brand-dark: #006D94; /* Pressed/active state one step below brand-dark (reconnect modal button). */ --cb5-brand-darker: #005A7A; /* Softer than --cb5-text-primary; used for page titles. */ --cb5-text-heading: #374151; /* Holiday / starred markers. */ --cb5-accent-gold: #D4A017; /* --- Layout --- */ --cb5-sidebar-width: 180px; --cb5-sidebar-collapsed: 56px; --cb5-rail-width: 52px; --cb5-header-height: 56px; --cb5-content-padding: 24px; --cb5-max-content-width: 1280px; /* --- Semantic surface tokens --- */ --cb5-surface-hover: var(--cb5-bg-secondary); --cb5-accent-subtle: var(--cb5-primary-light); /* --- Compatibility aliases ------------------------------------------------- These names are referenced from Razor inline styles but were never defined. An undefined custom property makes the whole declaration invalid, so the browser DROPPED it silently — 25 `background`/`color` rules across Skill Catalog, Invoice Detail, Assessment, Requisition Detail, Person Skills, JobReq Requirements and Contract Lines were rendering with no value at all. Defining them here fixes those in one place instead of editing 15 files. Migrate call sites to the canonical name as they're touched, then delete the alias (same convention as the CSS deprecation index in docs/sdd/process/conventions.md). */ --cb5-surface-2: var(--cb5-surface-raised); /* 20 refs */ --cb5-surface-subtle: var(--cb5-bg-subtle); /* 2 refs */ --cb5-color-error: var(--cb5-error); /* 1 ref */ --cb5-color-success: var(--cb5-success); /* 1 ref */ --cb5-text: var(--cb5-text-primary); /* 1 ref */ --cb5-hover-bg: var(--cb5-surface-hover); /* 1 ref */ /* These two had fallbacks so they rendered, but were pinned to a light-mode literal and never adapted to the theme. */ --cb5-border-light: var(--cb5-border); /* 4 refs */ --cb5-alert-error-bg: var(--cb5-error-bg); /* 1 ref */ /* --- Typography --- */ --cb5-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cb5-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace; --cb5-text-xs: 11px; --cb5-text-sm: 13px; --cb5-text-base: 14px; --cb5-text-md: 15px; --cb5-text-lg: 18px; --cb5-text-xl: 22px; --cb5-text-2xl: 28px; --cb5-weight-normal: 400; --cb5-weight-medium: 500; --cb5-weight-semibold: 600; --cb5-weight-bold: 700; --cb5-line-height: 1.5; /* --- Shape --- */ --cb5-radius-sm: 4px; --cb5-radius: 6px; --cb5-radius-md: 8px; --cb5-radius-lg: 12px; --cb5-radius-xl: 16px; --cb5-radius-full: 9999px; /* --- Shadows --- */ --cb5-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --cb5-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --cb5-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05); --cb5-shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04); /* --- Transitions --- */ --cb5-transition-fast: 150ms ease; --cb5-transition: 200ms ease; --cb5-transition-slow: 300ms ease; /* --- Z-Index --- */ --cb5-z-sidebar: 100; --cb5-z-header: 200; --cb5-z-dropdown: 300; --cb5-z-modal: 400; --cb5-z-toast: 500; /* --- Project Planning capacity tones (non-RYG; complementary to Health colors) --- */ --rp-cap-light-bg: #F1F5F9; /* slate-50 */ --rp-cap-light-fg: #475569; --rp-cap-good-bg: #DBEAFE; /* blue-100 */ --rp-cap-good-fg: #1E40AF; --rp-cap-tight-bg: #FED7AA; /* peach-200 */ --rp-cap-tight-fg: #9A3412; --rp-cap-over-bg: #FECACA; /* coral-200 */ --rp-cap-over-fg: #991B1B; --rp-cap-holiday-bg: #E2E8F0; /* slate-200 */ --rp-cap-holiday-fg: #64748B; /* --- LEGACY /resource-planning page ------------------------------------ Page-specific greys for the deprecated person-centric planning page (conventions.md → CSS deprecation index). Tokenised rather than left as raw hex so shell.css can stay under the cb5-raw-hex-colour rule without an exclusion that would blind the rule to the main stylesheet. DELETE THIS BLOCK when /resource-planning is removed — nothing else uses it. */ --rp-legacy-head-bg: #F7F9FB; --rp-legacy-line: #EDF0F3; --rp-legacy-cell-hover: #F7FBFD; --rp-legacy-cell-out: #F4F6F8; --rp-legacy-cell-weekend: #F9FAFB; --rp-legacy-cell-today: #EEF8FD; --rp-legacy-tooltip-bg: #1A2332; --rp-legacy-stat-icon: #9AB0BF; --rp-legacy-stat-icon-hi: #4A5568; --rp-legacy-panel-border: #DCE3E8; --rp-legacy-badge-at-bg: #FFEDD5; /* --- Project Planning grid layout --- */ --rp-col-w: 80px; /* week column (8 fit at ~1280 viewport) */ --rp-col-w-mo: 112px; /* month column */ --rp-firstcol-w: 320px; /* engineer/task sticky col (fixed) */ --rp-budget-w: 58px; /* task-budget sticky col */ --rp-totals-w: 80px; /* row total col */ /* --- PMO Console utilization bands (Stoplight cell fills) --- Calibrated to sit alongside --cb5-health-* without visual collision. Black + Orange are new vs Health palette; Red/Yellow/Green share hue family but pop harder as dense cells. */ --cb5-pmo-band-black: #1F2937; --cb5-pmo-band-black-fg: #F4F6F8; --cb5-pmo-band-red: #DC2626; --cb5-pmo-band-red-fg: #FFFFFF; --cb5-pmo-band-orange: #EA580C; --cb5-pmo-band-orange-fg: #1A1D23; --cb5-pmo-band-yellow: #EAB308; --cb5-pmo-band-yellow-fg: #1A1D23; --cb5-pmo-band-green: #16A34A; --cb5-pmo-band-green-fg: #1A1D23; --cb5-pmo-band-empty: #FFFFFF; --cb5-pmo-band-empty-fg: var(--cb5-text-tertiary); /* --- PMO Console margin tier RYG (BTD gross-margin columns) --- */ --cb5-pmo-margin-bad: var(--cb5-pmo-band-red); --cb5-pmo-margin-bad-fg: #FFFFFF; --cb5-pmo-margin-low: var(--cb5-pmo-band-orange); --cb5-pmo-margin-low-fg: #1A1D23; --cb5-pmo-margin-mid: var(--cb5-pmo-band-yellow); --cb5-pmo-margin-mid-fg: #1A1D23; --cb5-pmo-margin-ok: #86EFAC; --cb5-pmo-margin-ok-fg: #14532D; --cb5-pmo-margin-good: var(--cb5-pmo-band-green); --cb5-pmo-margin-good-fg: #FFFFFF; /* --- PMO Console soft tints (Balance + Earn Trajectory, ~50% saturation) --- */ --cb5-pmo-soft-pos: #DCFCE7; --cb5-pmo-soft-pos-fg: #15803D; --cb5-pmo-soft-neg: #FEE2E2; --cb5-pmo-soft-neg-fg: #B91C1C; /* --- PMO Console financial-half background tint (BTD mode) --- */ --cb5-pmo-fin-bg: #FAF8F4; --cb5-pmo-summary-bg: #F5F1E8; /* summary / totals columns — a shade deeper than fin-bg */ /* --- PMO Allocation palette --- Two palettes (Rose default, Workbook toggle). All four tones swap together via CSS custom-property overrides on the grid card (see pmo-console.css). Holiday is palette-independent (slate) since the header column is the only place it appears. */ /* Allocation tone palette — soft pastels */ --pmo-alloc-under-bg: #F4C9D0; --pmo-alloc-under-fg: #8E2433; --pmo-alloc-normal-bg: #C6E8C7; --pmo-alloc-normal-fg: #14532D; --pmo-alloc-tight-bg: #FDE68A; --pmo-alloc-tight-fg: #78350F; --pmo-alloc-over-bg: #BFDBFE; --pmo-alloc-over-fg: #1E3A8A; --pmo-alloc-holiday-bg: #475467; --pmo-alloc-holiday-fg: #E4E7EC; /* --- PMO Console grid metrics --- */ --pmo-row-h: 28px; --pmo-cell-w: 56px; --pmo-cell-w-fin: 92px; --pmo-firstcol-w: 176px; --pmo-totals-w: 62px; } @media (max-width: 1100px) { :root { --rp-firstcol-w: 240px; /* compact on narrower viewports */ } } /* Dark-mode overrides for capacity tones */ [data-theme="dark"] { --rp-cap-light-bg: #1E293B; --rp-cap-light-fg: #94A3B8; --rp-cap-good-bg: #1E3A5F; --rp-cap-good-fg: #93C5FD; --rp-cap-tight-bg: #3D2412; --rp-cap-tight-fg: #FDBA74; --rp-cap-over-bg: #3F1A1A; --rp-cap-over-fg: #FCA5A5; --rp-cap-holiday-bg: #243044; --rp-cap-holiday-fg: #94A3B8; } /* ============================================================ Dark Mode Token Overrides Applied when data-theme="dark" on element ============================================================ */ [data-theme="dark"] { --cb5-bg: #0F1117; --cb5-bg-secondary: #161B27; --cb5-bg-subtle: #131824; --cb5-surface: #1A1F2E; --cb5-surface-raised: #212840; --cb5-border: #2A3042; --cb5-border-strong: #3A4460; --cb5-divider: #252D40; --cb5-text-primary: #E8ECF0; --cb5-text-secondary: #9AA5B4; --cb5-text-tertiary: #6B7685; --cb5-text-muted: #6B7685; --cb5-text-link: #4DA3FF; --cb5-primary: #4DA3FF; --cb5-primary-hover: #70B8FF; --cb5-primary-light: #1A2A3D; /* Track the dark-mode primary above so rgba() tints stay on-hue. */ --cb5-primary-rgb: 77, 163, 255; /* Orange accent stays vivid; its subtle fill goes translucent so it reads on dark surfaces. */ --cb5-brand-accent-subtle: rgba(245, 127, 38, 0.14); --cb5-success-bg: #0D2818; --cb5-warning-bg: #2D1F00; --cb5-error-bg: #2D0A0A; --cb5-info-bg: #0D1F33; /* Status foregrounds invert to the light tints already used by the dark-mode badge rules these tokens replaced. */ --cb5-success-fg: #4ADE80; --cb5-warning-fg: #FBBF24; --cb5-warning-border: #6B4E14; --cb5-error-fg: #F87171; --cb5-error-fg-strong: #FCA5A5; --cb5-primary-soft: #7FB2E8; --cb5-text-heading: #CBD5E1; --cb5-accent-gold: #F0C24B; /* Log levels lift for contrast on the dark viewer background. */ --cb5-log-error: #F87171; --cb5-log-warning: #FBBF24; --cb5-log-info: #60A5FA; --cb5-log-debug: #A78BFA; --cb5-log-verbose: #9AA5B4; --cb5-surface-hover: var(--cb5-bg-secondary); /* #161B27 in dark */ --cb5-accent-subtle: var(--cb5-primary-light); /* #1A2A3D in dark */ --cb5-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --cb5-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --cb5-shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --cb5-shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3); }