/* ============================================================================= RiskFlag Design Tokens — the single source of truth for the app's look ============================================================================= HOW TO RE-SKIN THE WHOLE APP ---------------------------- Everything visual routes through these CSS custom properties. To change the look, you edit tokens HERE (or override them in a tenant skin) — never the individual component rules, and never a raw hex in a feature stylesheet. The tokens come in three tiers; change the one that matches your intent: 1. PRIMITIVES (--rf-navy-900, --rf-amber-500, spacing/radius scales …) The raw palette. Change one to shift that exact colour/value everywhere it is referenced. 2. SEMANTIC (--rf-primary, --rf-danger, --rf-surface, --rf-border …) Role-based aliases that POINT AT primitives. Re-point --rf-primary at a different primitive to re-brand the whole app's primary action in one line, with zero risk to unrelated colours. 3. CONSUMPTION (in rfsc.css / design-system.css / the x-rf-* components) Component rules read the SEMANTIC tokens. They never hard-code a hex and never read a primitive directly — so the two tiers above are the only knobs you touch. A tenant skin (public/css/babcock.css, oakleaf.css, fixrisk.css) loads AFTER this file and simply re-declares the handful of tokens it wants to change in its own :root block — that is the entire, supported re-skinning mechanism. No !important, no deep selectors, no per-component overrides. Load order (layouts/_siteStyles.blade.php): design-tokens.css → rfsc.css → tenant skin → design-system.css. Custom-property resolution is cascade-based, so the tenant skin's :root wins over the defaults below. ========================================================================== */ :root { /* --------------------------------------------------------------------------- TIER 1 — PRIMITIVES Raw values. These are the current live brand, codified. Change a value here to move that shade everywhere it is referenced. ------------------------------------------------------------------------ */ /* Brand palette (from the live app: btn-brand / btn-brand-secondary) */ --rf-navy-900: #242849; /* brand primary */ --rf-navy-700: #2f345f; /* brand primary border / darker edge */ --rf-amber-500: #ffc107; /* brand accent (primary hover) */ --rf-orange-500: #e0852b; /* brand secondary */ /* Neutral ramp (Bootstrap-4 aligned — matches the greys copied across the codebase, so tokenising existing hex is lossless) */ --rf-white: #ffffff; --rf-gray-100: #f8f9fa; --rf-gray-200: #e9ecef; --rf-gray-300: #dee2e6; --rf-gray-400: #ced4da; --rf-gray-500: #adb5bd; --rf-gray-600: #6c757d; /* #6c757d — copied ~36× across feature CSS */ --rf-gray-700: #495057; --rf-gray-800: #343a40; --rf-gray-900: #212529; --rf-black: #1b1e2b; /* Status primitives (Bootstrap-4 aligned — the exact hexes the audit found hand-copied: #007bff ~52×, #dc3545 ~17×, etc.) */ --rf-blue-500: #007bff; --rf-green-500: #28a745; --rf-teal-500: #20c997; --rf-red-500: #dc3545; /* A hotter red than red-500, for a severity ABOVE danger. Introduced for compliance critical fails, which skip review and raise their own task — they have to read as more than an ordinary fail sitting beside them. */ --rf-red-700: #b3001b; --rf-yellow-500: #ffc107; /* Amber dark enough to read as text on white (5.6:1). */ --rf-yellow-700: #8a6100; --rf-cyan-500: #17a2b8; /* Spacing scale (rem) — a 0 / .25 / .5 / 1 / 1.5 / 3 ladder */ --rf-space-0: 0; --rf-space-1: .25rem; --rf-space-2: .5rem; --rf-space-3: 1rem; --rf-space-4: 1.5rem; --rf-space-5: 3rem; /* Corner radius scale */ --rf-radius-sm: .2rem; --rf-radius: .25rem; --rf-radius-lg: .5rem; --rf-radius-pill: 100rem; /* Typography */ --rf-font-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --rf-font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace; --rf-font-size-base: 1rem; --rf-font-size-sm: .875rem; --rf-font-size-lg: 1.125rem; --rf-line-height-base: 1.5; --rf-font-weight-normal: 400; --rf-font-weight-medium: 600; --rf-font-weight-bold: 700; /* Elevation */ --rf-shadow-sm: 0 1px 2px rgba(20, 30, 50, .06); --rf-shadow: 0 1px 3px rgba(20, 30, 50, .10), 0 1px 2px rgba(20, 30, 50, .06); --rf-shadow-lg: 0 6px 20px rgba(20, 30, 50, .12), 0 2px 6px rgba(20, 30, 50, .08); /* --------------------------------------------------------------------------- TIER 2 — SEMANTIC TOKENS Role-based aliases. Re-point one of these at a different primitive to re-brand that role app-wide in a single line. This is the layer a tenant skin most often overrides. ------------------------------------------------------------------------ */ /* Brand roles */ --rf-brand: var(--rf-navy-900); --rf-brand-border: var(--rf-navy-700); --rf-brand-accent: var(--rf-amber-500); /* hover / highlight */ --rf-on-brand: var(--rf-white); /* text/icon on brand */ --rf-brand-secondary: var(--rf-orange-500); --rf-on-brand-secondary: var(--rf-white); /* Action colours — D1: the ONE primary action per view is the brand */ --rf-primary: var(--rf-brand); --rf-primary-hover: var(--rf-brand-accent); --rf-on-primary: var(--rf-on-brand); /* Feedback / status roles */ --rf-danger: var(--rf-red-500); --rf-critical: var(--rf-red-700); --rf-success: var(--rf-green-500); --rf-warning: var(--rf-yellow-500); --rf-warning-ink: var(--rf-yellow-700); /* amber label / outline on a light surface */ --rf-info: var(--rf-blue-500); --rf-on-danger: var(--rf-white); --rf-on-critical: var(--rf-white); --rf-on-success: var(--rf-white); --rf-on-warning: var(--rf-gray-900); --rf-on-info: var(--rf-white); /* Surfaces, text, borders */ --rf-surface: var(--rf-white); /* cards, modals, panels */ --rf-surface-muted: var(--rf-gray-100); /* page bg, inset areas */ --rf-surface-sunken: var(--rf-gray-200); --rf-border: var(--rf-gray-300); --rf-border-strong: var(--rf-gray-400); --rf-unassessed: var(--rf-gray-200); /* an assessment cell/band nobody has scored yet — mirrors AssessmentStripes::UNASSESSED_FILL */ --rf-ink: var(--rf-gray-900); /* body text */ --rf-ink-muted: var(--rf-gray-600); /* secondary text */ --rf-ink-faint: var(--rf-gray-500); /* placeholders, disabled */ --rf-link: var(--rf-blue-500); /* Component defaults (what the x-rf-* components and design-system.css read) */ /* Page header. The gutter is the page-content gutter (.content's .5rem plus .container-fluid's 7.5px) widened by half a step, so the full-bleed band does not read as tight against the window edge. Its COLOURS are deliberately NOT declared here. design-system.css reads them as var(--rf-page-header-bg, var(--rf-surface)) and so on, so by default they resolve in the element's own context — which is what lets `body.dark-mode` reach them. Aliasing them to a semantic token at :root would freeze them at the light value, because an alias resolves where it is DECLARED and dark mode re-declares on body (that shipped a white header bar in dark mode until it was caught in a browser). A skin that wants a different page-header colour declares the token itself; that override still wins, since the var() fallback only applies when the token is unset. */ --rf-page-header-gutter: calc(var(--rf-space-3) + 7.5px); /* The header is two rows, and BOTH columns use them: overline beside the trail, title beside the buttons. Fixed row heights are what keep the two sides aligned — the rows hold different things (small text vs a heading, text vs buttons) and would otherwise drift apart. */ --rf-page-header-row-overline: 1.25rem; --rf-page-header-row-title: 2.25rem; --rf-page-header-row-gap: var(--rf-space-1); --rf-control-radius: var(--rf-radius); --rf-card-radius: var(--rf-radius); --rf-card-shadow: var(--rf-shadow-sm); --rf-modal-radius: var(--rf-radius-lg); --rf-focus-ring: 0 0 0 .2rem rgba(36, 40, 73, .35); /* brand-navy @ .35 */ --rf-scrim: rgba(255, 255, 255, .72); /* loading / overlay backdrop */ --rf-scrim-dark: rgba(27, 30, 43, .62); /* help mode: dims the page behind the frames */ --rf-help-frame: var(--rf-brand-accent); /* help mode: highlight ring on a control with a hint */ --rf-help-panel-width: 380px; }