/** * Design Tokens - BART4 Unified Token System * * Single source of truth for all design tokens (colors, spacing, typography, etc.) * This file consolidates tokens from vanilla-ui.css and admin.css while maintaining * backward compatibility with existing --vui-* and --admin-* prefixes. * * Usage: * - Import this file FIRST in your CSS * - Use semantic tokens (--color-*, --spacing-*) for new code * - Existing --vui-* and --admin-* tokens continue to work * * Brand System: * - Main app (vanilla-ui): Teal primary (#0f766e) * - Admin panel: Blue primary (#c8402a) * Both intentionally separate per design decision * * @version 1.0.0 */ /* ========================================================================== Typeface — self-hosted public/fonts/Inter-Variable.woff2 has shipped in this repo since 2026-08-15 but was only ever @font-face'd inside two throwaway files under public/mockups/. The app merely NAMED Inter in --font-sans and inherited whatever the viewer's OS happened to have installed, so the product looked different on every machine and 28% of visible elements resolved to Arial. Declaring it here is what makes --font-sans mean anything at all. One variable file covers 100..900, so every weight step in the ladder below is a real cut rather than a synthesised smear. ========================================================================== */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Sora is the Planlined brand face — the only glyph on planlined.com and on the shipped sign-in (css/index-auth.css). Already self-hosted for the sign-in; declared here so the app shell can use it too. */ @font-face { font-family: 'Sora'; src: url('../fonts/Sora-Variable-latin.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } /* ========================================================================== Core Semantic Tokens ========================================================================== */ :root { /* ------------------------------------------------------------------------- Colors - Semantic Status Colors These are shared across ALL contexts (app + admin) ------------------------------------------------------------------------- */ --color-success: #22c55e; --color-success-light: rgba(34, 197, 94, 0.1); --color-success-dark: #16a34a; --color-warning: #f59e0b; --color-warning-light: rgba(245, 158, 11, 0.1); --color-warning-dark: #d97706; /* What-if designation. Read by Step4CostPreviewRenderer, module_ImplementationSheet and the wizard workbench island; was referenced everywhere and defined nowhere, so rgba(var(--what-if-color-rgb), .1) highlights rendered transparent. */ --what-if-color: #6d28d9; --what-if-color-rgb: 109, 40, 217; --color-error: #ef4444; --color-error-light: rgba(239, 68, 68, 0.1); --color-error-dark: #dc2626; --color-info: #c8402a; --color-info-light: rgba(200, 64, 42, 0.1); --color-info-dark: #c8402a; /* Cross-renderer semantic contract. CMF and Vue kit consume these aliases; product themes may repoint them without teaching either renderer about a brand palette or a workspace-theme implementation. */ --semantic-surface-canvas: var(--color-white); --semantic-surface-subtle: var(--color-gray-50); --semantic-surface-inset: var(--color-gray-100); --semantic-surface-selected: var(--color-info-light); --semantic-border-subtle: var(--color-gray-200); --semantic-border-strong: var(--color-gray-300); --semantic-text-primary: var(--color-gray-900); --semantic-text-secondary: var(--color-gray-600); --semantic-text-tertiary: var(--color-gray-500); --semantic-action-primary: var(--color-info-dark); --semantic-action-primary-hover: #a63320; --semantic-action-on-primary: var(--color-white); --semantic-focus-ring: rgba(200, 64, 42, 0.24); --semantic-state-info-bg: #fdf1ed; --semantic-state-info-border: #ffc9bc; --semantic-state-info-ink: #a63320; --semantic-state-success-bg: #ecfdf5; --semantic-state-success-border: #a7f3d0; --semantic-state-success-ink: #047857; --semantic-state-warning-bg: #fffbeb; --semantic-state-warning-border: #fde68a; --semantic-state-warning-ink: #92400e; --semantic-state-danger-bg: #fef2f2; --semantic-state-danger-border: #fecaca; --semantic-state-danger-ink: #991b1b; /* ------------------------------------------------------------------------- Colors - Neutral Palette Used for backgrounds, borders, text ------------------------------------------------------------------------- */ --color-white: #ffffff; --color-black: #000000; /* Gray scale - Slate (matches Tailwind) */ --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; /* ------------------------------------------------------------------------- Spacing Scale Consistent spacing across all components ------------------------------------------------------------------------- */ /* --spacing-* is an ALIAS SCALE onto canonical --space-* (defined later in this file; custom-property resolution is lazy, so forward refs are fine). Every alias is value-identical to the literal it replaced — the two scales were off by one step (--spacing-1 = 0.25rem but --space-1 = 0.5rem), which is why the mapping below is NOT name-to-name. New code: use --space-*. */ --spacing-0: 0; --spacing-1: var(--space-05); /* 4px */ --spacing-2: var(--space-1); /* 8px */ --spacing-3: var(--space-1-5); /* 12px */ --spacing-4: var(--space-2); /* 16px */ --spacing-5: var(--space-5); /* 20px — see HISTORICAL EXCEPTIONS */ --spacing-6: var(--space-3); /* 24px */ --spacing-8: var(--space-4); /* 32px */ --spacing-10: 2.5rem; /* 40px — no --space twin yet (5 is taken) */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ /* Semantic spacing aliases */ --spacing-xs: var(--spacing-1); --spacing-sm: var(--spacing-2); --spacing-md: var(--spacing-4); --spacing-lg: var(--spacing-6); --spacing-xl: var(--spacing-8); --spacing-2xl: var(--spacing-12); /* ------------------------------------------------------------------------- Border Radius ------------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ------------------------------------------------------------------------- Shadows - Premium Soft Slate Shadows ------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15); --shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.04); --shadow-none: none; /* ------------------------------------------------------------------------- Typography ------------------------------------------------------------------------- */ /* Type ROLES own the families. The product ships four typefaces on purpose (8f4014f74 guarantees two of them load); what was missing is any statement of which family owns which job, so the answer was decided by cascade order. The trap this replaces: `--font-sans` was Inter while `--cmf-font-sans` was IBM Plex Sans — two tokens both saying "sans", resolving to different typefaces — and the two report families were reachable only under a `--cmf-*` prefix that implied modal scope, so 59 call sites across 8 report stylesheets hardcoded the family string instead. Role tokens are the source of truth; the older names below alias them, so nothing has to migrate in one sweep. */ --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-editorial: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --font-document: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-numeric: 'SF Mono', Monaco, 'Cascadia Code', 'Fira Code', Consolas, monospace; /* Value-identical aliases. Every existing consumer resolves to exactly the string it resolved to before. */ --font-sans: var(--font-ui); --font-mono: var(--font-numeric); /* Font sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ------------------------------------------------------------------------- Transitions ------------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; /* ------------------------------------------------------------------------- CMF semantic aliases ComplexModalFactory is shared by the main app and admin surfaces. These aliases keep modal code on one vocabulary while still inheriting the active neutral/brand palette (including dark-mode neutral overrides). ------------------------------------------------------------------------- */ --surface-primary: var(--color-white); --surface-secondary: var(--color-gray-50); --surface-tertiary: var(--color-gray-100); --border-subtle: var(--color-gray-200); --border-default: var(--color-gray-300); --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-600); --text-tertiary: var(--color-gray-500); --brand-primary: var(--admin-brand-primary, #c8402a); --brand-primary-hover: var(--admin-brand-primary-hover, #c8402a); --brand-primary-ring: rgba(200, 64, 42, 0.15); /* Compatibility vocabulary used by CMF bodies and standalone tools. Keep these aliases here so /css/modules/design-tokens.css is no longer a second active palette with subtly different neutrals, radii, and type sizes. */ --surface-white: var(--surface-primary); --surface-1: var(--surface-primary); --surface-2: var(--surface-secondary); --surface-3: var(--surface-tertiary); --surface-hover: #fafbff; --text-muted: var(--text-tertiary); --text-placeholder: var(--color-gray-400); --brand-primary-dark: #a63320; --brand-primary-light: #fdf1ed; --brand-primary-lighter: #ffc9bc; --color-success-hover: var(--color-success-dark); --color-success-lighter: #f0fdf4; --color-warning-hover: var(--color-warning-dark); --color-warning-lighter: #fffbeb; --color-danger: var(--color-error); --color-danger-hover: var(--color-error-dark); --color-danger-light: #fee2e2; --color-danger-lighter: #fef2f2; --color-ai-purple: #8b5cf6; --color-ai-purple-hover: #7c3aed; --color-ai-purple-light: #f3e8ff; --designation-current: #10b981; --designation-current-bg: #ecfdf5; --designation-current-border: #a7f3d0; --designation-proposed: #c8402a; --designation-proposed-bg: #fdf1ed; --designation-proposed-border: #ffc9bc; --designation-renewal: #f59e0b; --designation-renewal-bg: #fffbeb; --designation-renewal-border: #fde68a; --designation-alternate: #0d6a06; --designation-alternate-bg: #edf7ec; --designation-alternate-border: #86c984; --designation-whatif: #0ea5e9; --designation-whatif-bg: #e0f2fe; --designation-whatif-border: #7dd3fc; /* ===== Ledger grammar ===== One source of truth for the comparison-table language shared by ReportUI, QCC Review, and Step3Unified. These are COLUMN TINTS and are deliberately distinct from --designation-* CHIP colors above: in the proposal book `current` recedes (slate) so `proposed` advances. Chips keep green. Consumed by public/css/modules/ledger-grammar.css and the .cmf-kit-table--ledger block in modules/ui/ComplexModalFactory.js. */ --ledger-role-current-tint: #f1f5f9; --ledger-role-current-ink: #64748b; --ledger-role-renewal-tint: #fffbeb; --ledger-role-renewal-ink: #b45309; --ledger-role-proposed-tint: #fdf1ed; --ledger-role-proposed-ink: #a63320; --ledger-head-from: #f7faff; --ledger-head-to: #f1f6fe; --ledger-head-border: #e4ecf8; --ledger-rule: #eef2f8; --ledger-row-hover: #f1f6ff; --ledger-total-rule: #1e293b; --ledger-delta-up: #b42318; --ledger-delta-down: #18794e; --radius-xs: var(--radius-sm); --radius-pill: var(--radius-full); /* --space-* definitions live in the "Canonical spacing" block below. The --space-N: var(--spacing-N) aliases that used to sit here were dead code for N=1..4 (shadowed by the later literals) and are folded into that block for N=5/6/8. */ --border-light: var(--color-gray-100); --border-emphasis: var(--color-gray-300); --input-padding: 0.625rem 0.75rem; --input-border: 1px solid var(--border-subtle); --input-radius: var(--radius-md); --input-focus-border: var(--brand-primary); --input-focus-shadow: 0 0 0 3px var(--brand-primary-ring); --transition-medium: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --btn-primary-shadow: 0 4px 14px rgba(200, 64, 42, 0.25); --btn-primary-shadow-hover: 0 6px 20px rgba(200, 64, 42, 0.35); --btn-success-shadow: 0 4px 14px rgba(16, 185, 129, 0.25); --btn-danger-shadow: 0 4px 14px rgba(239, 68, 68, 0.25); /* ------------------------------------------------------------------------- CMF workbench shell Consumers may choose a CMF size/density preset, but must not restyle the shell directly. Feature-owned document previews remain outside this tier. ------------------------------------------------------------------------- */ --cmf-wb-header-min-height: 88px; --cmf-wb-header-padding: 18px 24px; --cmf-wb-header-gap: 20px; /* The workbench header carried five orphan navy/blue literals — including a rgba(40,83,148) glow that was one of the four colliding blue families. Repointed onto the navy ramp, with the glow taken over by the accent so the header's one spot of color is the same hue as everything else. */ --cmf-wb-header-bg: radial-gradient( circle at 74% 0%, color-mix(in srgb, var(--bart-accent-400) 13%, transparent), transparent 34% ), linear-gradient( 118deg, var(--bart-navy-950) 0%, var(--bart-navy-850) 54%, var(--bart-navy-950) 100% ); --cmf-wb-header-border: var(--bart-navy-500); --cmf-wb-header-icon-size: 48px; --cmf-wb-header-icon-radius: 11px; --cmf-wb-header-icon-bg: linear-gradient(145deg, var(--bart-navy-600), var(--bart-navy-800)); --cmf-wb-title-size: 1.45rem; --cmf-wb-subtitle-size: 0.86rem; --cmf-wb-subtitle-color: #d7e1ef; --cmf-wb-rail-width: 272px; --cmf-wb-rail-bg: var(--surface-secondary); --cmf-wb-rail-border: var(--border-subtle); --cmf-wb-search-padding: 13px 13px 10px; --cmf-wb-control-height: 34px; --cmf-wb-control-radius: var(--radius-md); --cmf-wb-meter-margin: 0 13px 12px; --cmf-wb-meter-padding: 11px 13px; --cmf-wb-meter-radius: var(--radius-lg); --cmf-wb-meter-bg: linear-gradient(180deg, #f7faff, #f1f6fe); --cmf-wb-meter-border: #e4ecf8; --cmf-wb-rail-row-min-height: 80px; --cmf-wb-rail-row-padding: 11px 12px; --cmf-wb-rail-row-gap: 10px; --cmf-wb-rail-icon-size: 42px; --cmf-wb-metrics-gap: 26px; --cmf-wb-pane-header-padding: 15px 18px 13px; --cmf-wb-pane-padding: 16px 18px 24px; --cmf-wb-footer-min-height: 68px; --cmf-wb-footer-padding: 12px 24px; --cmf-wb-footer-bg: var(--surface-primary); --cmf-wb-footer-border: var(--border-subtle); --cmf-wb-button-min-height: 42px; --cmf-wb-button-min-width: 112px; --cmf-wb-primary-min-width: 150px; --cmf-wb-success: #18794e; --cmf-wb-warning: #b45309; --cmf-wb-danger: #b42318; --cmf-wb-info: #a63320; --cmf-wb-staged: #a21caf; /* ----------------------------------------------------------------------- CMF visual system CMF resolves these aliases at the modal boundary. They intentionally do not replace the app/admin brand or neutral scales: the modal system is a shared operational instrument with its own paper, rail, command, and status grammar. ----------------------------------------------------------------------- */ --cmf-visual-header: #071522; --cmf-visual-header-high: #102b42; /* 🔴 SLAB INK — theme-INVARIANT on purpose, and that is the whole contract. The modal header is a dark slab in BOTH app themes, so its contents must NOT read --cmf-visual-ink / --cmf-visual-command, which invert: in light mode --cmf-visual-command is #07586b, which is reserved for the light work surface rather than the slab and fails the 3:1 edge floor outright. These are therefore declared ONCE, here in :root, with NO dark counterpart — the absence of a dark block is the documentation that the slab never flips. Measured against the #071522 slab: ink 17.65:1, ink-secondary 12.81:1, accent, ready, review, and danger all clear their UI floors. */ --cmf-header-ink: #fbfaf6; --cmf-header-ink-secondary: #d1d8df; --cmf-header-accent: #72dff5; --cmf-header-edge: rgb(114 223 245 / 28%); --cmf-header-tile: rgb(10 132 159 / 24%); --cmf-header-tile-hover: rgb(114 223 245 / 18%); --cmf-header-ready: #5cc89a; --cmf-header-review: #e0a04a; --cmf-header-danger: #ff8a7a; /* Benefits Intelligence surface. A cool-neutral field links the navy slab, cyan commands, and export/report previews without relying on warm paper. */ --cmf-visual-surface: #f6f8fb; --cmf-visual-surface-raised: #ffffff; --cmf-visual-rail: #eef3f7; --cmf-visual-rule: #d6e0ea; --cmf-visual-rule-strong: #9aabbb; /* The panel's outer boundary. `rule-strong` cannot serve both jobs: this must survive against the SCRIMMED backdrop, not just against the surface. The cool edge clears 3:1 against both raised and base light surfaces. */ --cmf-visual-edge: #7c91a6; /* Ink ramp, corrected: this file's prior pass (commit e1d8f4402) left ink-tertiary (#3f4f65, ~7.1:1) LIGHTER than ink-secondary (#36475a, ~8.9:1) — an inverted rank, so the two read as one weight. Now strictly descending: ink > secondary > tertiary, tertiary floor 4.5:1. */ --cmf-visual-ink: #10233b; --cmf-visual-ink-secondary: #34495f; --cmf-visual-ink-tertiary: #42566b; /* Benefits Intelligence. ONE cyan command colour drives every affordance: primary button, toggle-on, rail-active, links, meter fill, focus ring. */ --cmf-visual-command: #07586b; --cmf-visual-command-hover: #06495a; --cmf-visual-command-ink: #ffffff; /* --cmf-accent was previously defined ONLY in document-library.css, scoped to .document-library-modal, so every other modal's toggle fell back to a hardcoded #c8402a. It is the same thing as the command colour. */ --cmf-accent: var(--cmf-visual-command); --cmf-toggle-off: #d6e0ea; --cmf-toggle-knob: #ffffff; /* Aliases, not declarations. CMF keeps the document/report face available under its legacy sans name while operational controls opt into --font-ui. Editorial figures may still opt into --cmf-font-serif explicitly. */ --cmf-font-serif: var(--font-editorial); --cmf-font-sans: var(--font-document); --cmf-visual-command-tint: #e7f5f8; --cmf-visual-command-tint-strong: #d3edf2; /* Tracks --cmf-visual-command and clears 4.5:1 on the cool surface. */ --cmf-visual-info: #07586b; --cmf-visual-ready: #075b3b; --cmf-visual-review: #784000; --cmf-visual-danger: #922727; --cmf-visual-staged: #4354a3; --cmf-visual-disabled-surface: #e6ebf0; --cmf-visual-disabled-ink: #718093; --cmf-visual-focus-ring: rgb(7 88 107 / 30%); --cmf-visual-folio: rgb(7 88 107 / 24%); --cmf-visual-shadow: 0 28px 72px rgb(5 18 31 / 27%), 0 8px 24px rgb(5 18 31 / 13%); /* Plan roles as CHROME tokens (role tags, column headers). Until now these lived only in report-themes.css, so every chrome consumer spelled hex. */ --cmf-visual-plan-current: #4d5b70; --cmf-visual-plan-proposed: #172d43; --cmf-visual-plan-alt: #213e5b; /* Status grounds. A status is tint + icon + text; the ink roles above are the text/icon colour, these are the ground. Each pair clears 4.5:1. */ --cmf-visual-ready-tint: #e6f3ec; --cmf-visual-review-tint: #eef2f7; --cmf-visual-danger-tint: #f7e9eb; --cmf-visual-info-tint: #edf2f8; /* The decision action. --cmf-visual-command stays "interactive affordance" (links, active tabs, selection); --signal is the ONE filled primary. */ --cmf-visual-signal: #07586b; --cmf-visual-signal-hover: #06495a; --cmf-visual-signal-text: #07586b; --cmf-visual-signal-tint: #e7f5f8; /* Solid focus colour; --cmf-visual-focus-ring stays the 30% alpha halo. */ --cmf-visual-focus: #07586b; /* ------------------------------------------------------------------------- Z-Index Layers (Unified) Single scale that works for both app and admin contexts ------------------------------------------------------------------------- */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 900; --z-modal: 1000; --z-popover: 1050; /* Menus rendered to (row/overflow/context menus) so a modal's own overflow cannot clip them. Above the CMF modal band and the hand-rolled export overlays, below toasts and the a11y skip link. */ --z-detached-menu: 100000; --z-toast: 2147483647; /* Must be above ALL modals - max z-index */ --z-tooltip: 100001; --z-max: 999999; } /* ========================================================================== Context-Specific Brand Colors ========================================================================== */ /* Main App (Vanilla UI) - Teal Brand */ :root { --app-primary: #0f766e; --app-primary-hover: #0d6560; --app-primary-light: rgba(15, 118, 110, 0.1); --app-primary-dark: #115e59; --app-accent: #0ea5e9; --app-accent-hover: #0284c7; --app-accent-light: rgba(14, 165, 233, 0.1); } /* Admin Panel - Blue Brand */ :root { --admin-brand-primary: #c8402a; --admin-brand-primary-hover: #c8402a; --admin-brand-primary-light: rgba(200, 64, 42, 0.1); --admin-brand-primary-dark: #a63320; } /* ========================================================================== BART system tier — one accent, one grid, one ladder 2026-08-16 WHY THIS BLOCK EXISTS A census of a single rendered viewport painted 12+ non-neutral colors from four unrelated families: cyan (#67e8f9 x53, #5cc8d7), the CSS *named* color turquoise (#40e0d0), four separate blues (#2f6ff2, #c8402a, #2467d8, #a63320) and a violet (#a78bfa). The mechanism was mundane: the header of this file documents "app = teal, admin = blue, intentionally separate", but --admin-brand-primary is defined at GLOBAL :root, so `--brand-primary: var(--admin-brand-primary, #c8402a)` never fell through to its fallback and resolved blue everywhere. With 1,785 var(--brand-primary*) consumers against 276 var(--vui-primary*), the admin accent had quietly become the app's de-facto brand by 6.5x — including the inner slab of the Proposal Desk's primary CTA. The ramp below is a RESOLUTION, not a replacement: it interpolates the two incumbent anchors rather than inventing a hue, so nothing recognizable is lost. Both are preserved at their exact values: --bart-accent-300 = #67e8f9 the dominant painted accent (53 uses) --bart-accent-800 = #0f766e --app-primary, the documented app teal ========================================================================== */ :root { /* ---- The one accent ramp ------------------------------------------------ Teal-cyan, 50..900. Every stray blue/turquoise/violet accent in the app collapses onto a step of this ramp. */ --bart-accent-50: #ecfeff; --bart-accent-100: #cffafe; --bart-accent-200: #a5f3fc; --bart-accent-300: #67e8f9; /* incumbent: dominant painted accent */ --bart-accent-400: #22d3ee; --bart-accent-500: #06b6d4; --bart-accent-600: #0891b2; --bart-accent-700: #0e7490; --bart-accent-800: #0f766e; /* incumbent: --app-primary, the app teal */ --bart-accent-900: #134e4a; /* ---- Navy ground ramp --------------------------------------------------- Sampled from what the app already paints: the Desk card measured rgba(15,31,51,.78) = #0f1f33, which is kept exactly at step 800. */ --bart-navy-950: #071220; --bart-navy-900: #0a1626; /* page ground */ --bart-navy-850: #0d1b2c; --bart-navy-800: #0f1f33; /* incumbent: raised surface */ --bart-navy-700: #16293f; /* elevated / row hover */ --bart-navy-600: #1e3450; /* control face */ --bart-navy-500: #2a4463; /* strong border */ /* ---- Register-aware accent ---------------------------------------------- Light is the default because the workspace ground measured #f5f5f5. The dark register is re-pointed under the dark scope further down, so a component written once against --accent is contrast-correct on both. */ --accent: var(--bart-accent-600); /* interactive fill #0891b2 */ --accent-hover: var(--bart-accent-700); --accent-active: var(--bart-accent-800); --accent-ink: var(--bart-accent-700); /* accent-colored TEXT: 4.6:1 on white */ --accent-ink-muted: var(--bart-accent-600); /* secondary accent text */ --accent-on: #ffffff; /* text ON an accent fill */ --accent-surface: var(--bart-accent-50); --accent-border: var(--bart-accent-200); --accent-ring: rgba(8, 145, 178, 0.32); /* ---- Repoint the brand vocabulary onto the accent ----------------------- This is the 1,785-consumer move. --admin-brand-primary keeps its blue and is NOT touched, so public/css/admin.css and the standalone admin-*.html pages (which do not load this file at all) are unaffected; the in-app admin container restores blue explicitly in the scope block below. */ --brand-primary: var(--accent); --brand-primary-hover: var(--accent-hover); --brand-primary-ring: var(--accent-ring); /* ---- Type scale, on a 4px grid ----------------------------------------- The live scale rendered 14.4px / 13.12px / 16.8px with 2.128px tracking because it derived from a non-integer base. These are absolute rem values off a 16px root so every step lands on the grid and optical alignment in dense tables is possible at all. */ --ts-11: 0.6875rem; /* 11px micro label, table eyebrow */ --ts-12-5: calc(12.5rem / 16); /* 12.5px dense progress label */ --ts-12: 0.75rem; /* 12px caption, meta */ --ts-13: 0.8125rem; /* 13px dense table cell */ --ts-14: 0.875rem; /* 14px UI default */ --ts-16: 1rem; /* 16px comfortable body */ --ts-18: 1.125rem; /* 18px card title */ --ts-22: 1.375rem; /* 22px section title */ --ts-24: 1.5rem; /* 24px panel title */ --ts-30: 1.875rem; /* 30px lead financial figure */ --ts-26: 1.625rem; /* 26px library heading */ --ts-28: 1.75rem; /* 28px page title */ --ts-36: 2.25rem; /* 36px display */ --ts-48: 3rem; /* 48px hero */ /* Weight ladder — real cuts, now that the variable font actually loads. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* Tracking: negative tightens as size grows; floor is -0.04em. */ --tracking-display: -0.032em; --tracking-title: -0.021em; --tracking-body: -0.006em; --tracking-label: 0.06em; /* ---- Elevation ladder --------------------------------------------------- Replaces the unmotivated `0 40px 80px rgba(0,0,0,.36)` single shadow. Every step carries a real offset AND a soft blur, plus a contact shadow. */ --elev-1: 0 1px 1px rgba(10, 22, 38, 0.04), 0 1px 2px rgba(10, 22, 38, 0.06); --elev-2: 0 1px 2px rgba(10, 22, 38, 0.05), 0 4px 10px rgba(10, 22, 38, 0.07); --elev-3: 0 2px 4px rgba(10, 22, 38, 0.06), 0 12px 24px rgba(10, 22, 38, 0.09); --elev-4: 0 4px 8px rgba(10, 22, 38, 0.08), 0 24px 48px rgba(10, 22, 38, 0.12); /* ---- Radius discipline -------------------------------------------------- The app mixed 12 / 14 / 24px with no scale. Four steps and a pill. */ --r-1: 4px; /* chip, tag, swatch */ --r-2: 8px; /* input, button, small control */ --r-3: 12px; /* card, panel, section */ --r-4: 16px; /* modal, sheet */ --r-pill: 9999px; /* ---- Motion ------------------------------------------------------------- Exponential ease-out from an already-visible default. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* Dark register — the Desk, the app chrome, and any dark CMF host. Only the accent's ROLE changes; the ramp is the same object. On navy, the 600 step used on light drops under 3:1, so interactive moves up to 400. The Desk is listed by its DARK PARTS rather than by the modal id: since 2026-09-02 its work surface is the app's light ground, and only the rail, the hero band (top bar + intro), the activity panel's header band and the tools explorer paint navy. Scoping the register to those means a component written against --accent-ink is contrast-correct on both halves of the same screen. --accent-ink here evaluates to #67e8f9, the cyan the Desk already painted, so the dark parts did not recolor. */ html[data-theme='dark'], [data-bart-register='dark'], .welcome-launch-nav, .welcome-home-topbar, .welcome-launch-intro, .welcome-recent-activity-head, .welcome-tools-explorer { --accent: var(--bart-accent-400); /* #22d3ee — 6.4:1 on --bart-navy-900 */ --accent-hover: var(--bart-accent-300); --accent-active: var(--bart-accent-200); --accent-ink: var(--bart-accent-300); /* #67e8f9 — the incumbent cyan */ --accent-ink-muted: color-mix(in srgb, var(--bart-accent-300) 76%, transparent); --accent-on: #04212b; --accent-surface: rgba(34, 211, 238, 0.1); --accent-border: rgba(34, 211, 238, 0.28); --accent-ring: rgba(34, 211, 238, 0.36); /* On a dark ground a drop shadow reads as absence, not depth. The material comes from a hairline top highlight plus a deeper, softer cast. */ --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); --elev-2: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --elev-3: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); --elev-4: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07); } /* In-app admin keeps its documented blue. The standalone admin-*.html pages never load this file, so this scope is the whole of the admin surface that could otherwise have inherited the app accent. */ .admin-dashboard-container, [data-surface='admin'] { --accent: var(--admin-brand-primary); --accent-hover: var(--admin-brand-primary-hover); --accent-active: var(--admin-brand-primary-dark); --accent-ink: var(--admin-brand-primary-dark); --accent-on: #ffffff; --accent-surface: var(--admin-brand-primary-light); --accent-border: rgba(200, 64, 42, 0.28); --accent-ring: rgba(200, 64, 42, 0.32); } /* ========================================================================== Backward Compatibility - VUI Tokens Maps new tokens to existing --vui-* naming ========================================================================== */ :root { /* VUI Primary (Teal) */ --vui-primary: var(--app-primary); --vui-primary-hover: var(--app-primary-hover); --vui-primary-light: var(--app-primary-light); /* VUI Accent */ --vui-accent: var(--app-accent); --vui-accent-hover: var(--app-accent-hover); --vui-accent-light: var(--app-accent-light); /* VUI Semantic */ --vui-success: var(--color-success); --vui-success-light: var(--color-success-light); --vui-warning: var(--color-warning); --vui-warning-light: var(--color-warning-light); --vui-error: var(--color-error); --vui-error-light: var(--color-error-light); --vui-info: var(--color-info); --vui-info-light: var(--color-info-light); /* VUI Neutrals */ --vui-bg: var(--color-gray-50); --vui-bg-elevated: var(--color-white); --vui-border: var(--color-gray-200); --vui-border-hover: var(--color-gray-300); --vui-text: var(--color-gray-900); --vui-text-secondary: var(--color-gray-600); --vui-text-muted: var(--color-gray-400); --vui-text-inverse: var(--color-white); /* VUI Shadows */ --vui-shadow-sm: var(--shadow-sm); --vui-shadow-md: var(--shadow-md); --vui-shadow-lg: var(--shadow-lg); --vui-shadow-xl: var(--shadow-xl); /* VUI Radius */ --vui-radius-sm: var(--radius-sm); --vui-radius-md: var(--radius-md); --vui-radius-lg: var(--radius-lg); --vui-radius-xl: var(--radius-xl); --vui-radius-full: var(--radius-full); /* VUI Spacing */ --vui-space-1: var(--spacing-1); --vui-space-2: var(--spacing-2); --vui-space-3: var(--spacing-3); --vui-space-4: var(--spacing-4); --vui-space-5: var(--spacing-5); --vui-space-6: var(--spacing-6); --vui-space-8: var(--spacing-8); --vui-space-10: var(--spacing-10); --vui-space-12: var(--spacing-12); /* VUI Typography */ --vui-font-sans: var(--font-sans); --vui-font-mono: var(--font-mono); --vui-text-xs: var(--text-xs); --vui-text-sm: var(--text-sm); --vui-text-base: var(--text-base); --vui-text-lg: var(--text-lg); --vui-text-xl: var(--text-xl); --vui-text-2xl: var(--text-2xl); --vui-text-3xl: var(--text-3xl); /* VUI Transitions */ --vui-transition-fast: var(--transition-fast); --vui-transition-base: var(--transition-base); --vui-transition-slow: var(--transition-slow); /* VUI Z-Index */ --vui-z-dropdown: var(--z-dropdown); --vui-z-sticky: var(--z-sticky); --vui-z-modal-backdrop: var(--z-modal-backdrop); --vui-z-modal: var(--z-modal); --vui-z-toast: var(--z-toast); --vui-z-tooltip: var(--z-tooltip); } /* ========================================================================== Backward Compatibility - Admin Tokens Maps new tokens to existing --admin-* naming ========================================================================== */ :root { /* Admin Primary (Blue) */ --admin-primary: var(--admin-brand-primary); --admin-primary-dark: var(--admin-brand-primary-hover); /* Admin Semantic */ --admin-success: var(--color-success); --admin-warning: var(--color-warning); --admin-error: var(--color-error); --admin-info: var(--color-info); /* Admin Backgrounds */ --admin-bg: var(--color-white); --admin-bg-secondary: var(--color-gray-50); --admin-bg-tertiary: var(--color-gray-100); /* Admin Borders */ --admin-border: var(--color-gray-200); --admin-border-dark: var(--color-gray-300); /* Admin Text */ --admin-text: var(--color-gray-900); --admin-text-secondary: var(--color-gray-500); --admin-text-muted: var(--color-gray-400); /* Admin Spacing */ --admin-spacing-xs: var(--spacing-xs); --admin-spacing-sm: var(--spacing-sm); --admin-spacing-md: var(--spacing-md); --admin-spacing-lg: var(--spacing-lg); --admin-spacing-xl: var(--spacing-xl); /* Admin Radius */ --admin-radius-sm: var(--radius-sm); --admin-radius-md: var(--radius-md); --admin-radius-lg: var(--radius-lg); --admin-radius-full: var(--radius-full); /* Admin Shadows */ --admin-shadow-sm: var(--shadow-sm); --admin-shadow-md: var(--shadow-md); --admin-shadow-lg: var(--shadow-lg); --admin-shadow-xl: var(--shadow-xl); /* Admin Z-Index */ --admin-z-dropdown: var(--z-dropdown); --admin-z-modal: var(--z-modal); --admin-z-toast: var(--z-toast); --admin-z-tooltip: var(--z-tooltip); } /* ========================================================================== Backward Compatibility - Legacy tokens.css Maps new tokens to existing naming from root tokens.css ========================================================================== */ :root { /* Legacy --primary-color mapping Note: --primary-color (#c8402a blue) was used in older code New standard is --app-primary (#0f766e teal) for main app We preserve --primary-color for backward compatibility 2026-08-16: "preserved for backward compatibility" is how the blue spread. These aliases were still pointing at the ADMIN brand, and older surfaces lean on them heavily — 49 references in case-library.css and 11 more via --primary-dark, against a codebase that had already declared teal the standard in the note above. Repointed onto --accent so the alias keeps its name and its consumers, and simply resolves to the brand the comment says it should have. --accent is register- and surface-aware, so admin containers still resolve blue through the .admin-dashboard-container scope. Deliberately NOT swept: raw blue literals that encode STATE rather than brand, e.g. .case-card[data-status='cloud'] sits beside a yellow [data-status='recent']. Those are a status system; folding them into the accent would erase the distinction they exist to carry. */ --primary-color: var(--accent); /* --primary-color-rgb has zero consumers repo-wide; kept as a literal so nothing silently breaks if one appears, but it is dead as of this date. */ --primary-color-rgb: 200, 64, 42; --primary-dark: var(--accent-hover); --primary-light: var(--accent-surface); /* Legacy color aliases (reference styles.css variables) */ --color-brand: var(--app-primary); --color-brand-700: var(--app-primary-dark); --color-brand-50: var(--app-primary-light); /* Legacy success colors */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-300: #6ee7b7; --color-success-500: var(--color-success); --color-success-600: #065f46; /* Legacy warning colors */ --color-warning-50: #fff7ed; --color-warning-100: #fef3c7; --color-warning-300: #fcd34d; --color-warning-500: var(--color-warning); --color-warning-700: #92400e; /* Legacy danger/error colors */ --color-danger-50: #fee2e2; --color-danger-300: #fca5a5; --color-danger-500: var(--color-error); --color-danger-600: var(--color-error-dark); --color-danger-900: #991b1b; /* Legacy info colors */ --color-info-50: var(--color-info-light); --color-info-500: var(--color-info); --color-info-800: #a63320; /* Legacy neutral colors */ --color-neutral-50: var(--color-gray-50); --color-neutral-100: var(--color-gray-100); --color-neutral-150: #f3f4f6; --color-neutral-200: var(--color-gray-200); --color-neutral-300: var(--color-gray-300); --color-neutral-400: var(--color-gray-400); --color-neutral-500: var(--color-gray-500); --color-neutral-600: var(--color-gray-600); --color-neutral-700: var(--color-gray-700); --color-neutral-800: var(--color-gray-800); --color-neutral-900: var(--color-gray-900); --color-neutral-950: #0f172a; /* Legacy special colors */ --color-diff-pos: #16a34a; --color-diff-neg: #dc2626; --surface-muted: var(--color-gray-50); --white: var(--color-white); --black: var(--color-black); --skeleton-sheen: #eceff3; /* Canonical spacing (--space-*) — suffix is a multiplier of the 0.5rem base */ --space-0: 0; --space-025: 0.125rem; --space-05: 0.25rem; --space-075: 0.375rem; --space-1: 0.5rem; --space-1-5: 0.75rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; /* HISTORICAL EXCEPTIONS — values inherited from the retired --space-N: var(--spacing-N) aliases; they violate the multiplier convention (5 would be 2.5rem, etc.). Do not extend this pattern; migrate usages to the convention-correct token, then delete. */ --space-5: 1.25rem; /* = old --spacing-5; convention says 2.5rem */ --space-6: 1.5rem; /* duplicate of --space-3 */ --space-8: 2rem; /* duplicate of --space-4 */ /* Legacy typography (--font-*) */ --font-xs: var(--text-xs); --font-sm: var(--text-sm); --font-base: var(--text-base); --font-lg: var(--text-lg); --font-xl: var(--text-xl); /* Legacy breakpoints */ --bp-xl: 1280px; --bp-lg: 1024px; --bp-md: 768px; --bp-sm: 640px; /* Legacy z-index (simple scale) */ --z1: 1; --z2: 2; --z3: 3; --z4: 4; --z6: 6; --z10: 10; /* Legacy borders */ --border-1: 1px; --border-2: 2px; /* Legacy shadows */ --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-card: var(--shadow-md); } /* ========================================================================== Dark Mode Support ========================================================================== */ /* System preference dark mode */ @media (prefers-color-scheme: dark) { :root.auto-dark, :root.vui-auto-dark { /* Neutral overrides */ --color-gray-50: #0f172a; --color-gray-100: #1e293b; --color-gray-200: #334155; --color-gray-300: #475569; --color-gray-400: #64748b; --color-gray-500: #94a3b8; --color-gray-600: #cbd5e1; --color-gray-700: #e2e8f0; --color-gray-800: #f1f5f9; --color-gray-900: #f8fafc; /* Shadows need adjustment for dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6); --surface-primary: #0f172a; --surface-secondary: #1e293b; --surface-tertiary: #334155; --border-subtle: #334155; --border-default: #475569; /* Ledger grammar — dark. Tints become raised surfaces, inks lighten to stay legible on them, delta tones desaturate. */ --ledger-role-current-tint: #1e293b; --ledger-role-current-ink: #94a3b8; --ledger-role-renewal-tint: #2a2113; --ledger-role-renewal-ink: #fbbf24; --ledger-role-proposed-tint: #17233d; --ledger-role-proposed-ink: #ffc9bc; --ledger-head-from: #1e293b; --ledger-head-to: #172033; --ledger-head-border: #334155; --ledger-rule: #253044; --ledger-row-hover: #1c2b44; --ledger-total-rule: #cbd5e1; --ledger-delta-up: #fca5a5; --ledger-delta-down: #6ee7b7; --cmf-visual-surface: #111b27; --cmf-visual-surface-raised: #172433; --cmf-visual-rail: #0b1520; --cmf-visual-rule: #26394b; --cmf-visual-rule-strong: #61788e; --cmf-visual-edge: #6d8398; --cmf-visual-ink: #f1f6fb; --cmf-visual-ink-secondary: #c3d0dc; --cmf-visual-ink-tertiary: #94a7b8; --cmf-visual-command: #72dff5; --cmf-visual-command-hover: #9beafa; --cmf-visual-command-ink: #071a22; --cmf-accent: var(--cmf-visual-command); --cmf-toggle-off: #26394b; --cmf-toggle-knob: #f1f6fb; --cmf-visual-command-tint: #123541; --cmf-visual-command-tint-strong: #174b5a; --cmf-visual-info: #72dff5; --cmf-visual-ready: #6fe0aa; --cmf-visual-review: #f6c67b; --cmf-visual-danger: #ffaaa5; --cmf-visual-staged: #a9b8ff; --cmf-visual-disabled-surface: #1b2837; --cmf-visual-disabled-ink: #8799aa; --cmf-visual-focus-ring: rgb(114 223 245 / 34%); --cmf-visual-folio: rgb(114 223 245 / 22%); --cmf-visual-shadow: 0 28px 72px rgb(0 0 0 / 48%), 0 8px 24px rgb(0 0 0 / 28%); --cmf-visual-plan-current: #7c8ca2; --cmf-visual-plan-proposed: #c3d0dc; --cmf-visual-plan-alt: #8fa9c4; --cmf-visual-ready-tint: #0f2b21; --cmf-visual-review-tint: #2b2210; --cmf-visual-danger-tint: #311416; --cmf-visual-info-tint: #123541; --cmf-visual-signal: #72dff5; --cmf-visual-signal-hover: #9beafa; --cmf-visual-signal-text: #9beafa; --cmf-visual-signal-tint: #123541; --cmf-visual-focus: #72dff5; } } /* Explicit dark mode class */ .dark-mode, .vui-dark { --color-gray-50: #0f172a; --color-gray-100: #1e293b; --color-gray-200: #334155; --color-gray-300: #475569; --color-gray-400: #64748b; --color-gray-500: #94a3b8; --color-gray-600: #cbd5e1; --color-gray-700: #e2e8f0; --color-gray-800: #f1f5f9; --color-gray-900: #f8fafc; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6); --surface-primary: #0f172a; --surface-secondary: #1e293b; --surface-tertiary: #334155; --border-subtle: #334155; --border-default: #475569; /* Ledger grammar — dark. Tints become raised surfaces, inks lighten to stay legible on them, delta tones desaturate. */ --ledger-role-current-tint: #1e293b; --ledger-role-current-ink: #94a3b8; --ledger-role-renewal-tint: #2a2113; --ledger-role-renewal-ink: #fbbf24; --ledger-role-proposed-tint: #17233d; --ledger-role-proposed-ink: #ffc9bc; --ledger-head-from: #1e293b; --ledger-head-to: #172033; --ledger-head-border: #334155; --ledger-rule: #253044; --ledger-row-hover: #1c2b44; --ledger-total-rule: #cbd5e1; --ledger-delta-up: #fca5a5; --ledger-delta-down: #6ee7b7; --cmf-visual-surface: #111b27; --cmf-visual-surface-raised: #172433; --cmf-visual-rail: #0b1520; --cmf-visual-rule: #26394b; --cmf-visual-rule-strong: #61788e; --cmf-visual-edge: #6d8398; --cmf-visual-ink: #f1f6fb; --cmf-visual-ink-secondary: #c3d0dc; --cmf-visual-ink-tertiary: #94a7b8; --cmf-visual-command: #72dff5; --cmf-visual-command-hover: #9beafa; --cmf-visual-command-ink: #071a22; --cmf-accent: var(--cmf-visual-command); --cmf-toggle-off: #26394b; --cmf-toggle-knob: #f1f6fb; --cmf-visual-command-tint: #123541; --cmf-visual-command-tint-strong: #174b5a; --cmf-visual-info: #72dff5; --cmf-visual-ready: #6fe0aa; --cmf-visual-review: #f6c67b; --cmf-visual-danger: #ffaaa5; --cmf-visual-staged: #a9b8ff; --cmf-visual-disabled-surface: #1b2837; --cmf-visual-disabled-ink: #8799aa; --cmf-visual-focus-ring: rgb(114 223 245 / 34%); --cmf-visual-folio: rgb(114 223 245 / 22%); --cmf-visual-shadow: 0 28px 72px rgb(0 0 0 / 48%), 0 8px 24px rgb(0 0 0 / 28%); --cmf-visual-plan-current: #7c8ca2; --cmf-visual-plan-proposed: #c3d0dc; --cmf-visual-plan-alt: #8fa9c4; --cmf-visual-ready-tint: #0f2b21; --cmf-visual-review-tint: #2b2210; --cmf-visual-danger-tint: #311416; --cmf-visual-info-tint: #123541; --cmf-visual-signal: #72dff5; --cmf-visual-signal-hover: #9beafa; --cmf-visual-signal-text: #9beafa; --cmf-visual-signal-tint: #123541; --cmf-visual-focus: #72dff5; } /* Explicit data-theme is also used by isolated CMF hosts that do not carry the app-level .dark-mode/.vui-dark classes. */ html[data-theme='dark'] { /* Keep the base surface/text aliases in sync with the class-driven theme. Isolated Vue/CMF hosts commonly have only this attribute. */ --color-gray-50: #0f172a; --color-gray-100: #1e293b; --color-gray-200: #334155; --color-gray-300: #475569; --color-gray-400: #64748b; --color-gray-500: #94a3b8; --color-gray-600: #cbd5e1; --color-gray-700: #e2e8f0; --color-gray-800: #f1f5f9; --color-gray-900: #f8fafc; --surface-primary: #0f172a; --surface-secondary: #1e293b; --surface-tertiary: #334155; --border-subtle: #334155; --border-default: #475569; /* Ledger grammar — dark. Tints become raised surfaces, inks lighten to stay legible on them, delta tones desaturate. Mirrors .dark-mode/.vui-dark above so isolated CMF hosts themed only by the attribute (no app-level class) still get the dark ledger values. */ --ledger-role-current-tint: #1e293b; --ledger-role-current-ink: #94a3b8; --ledger-role-renewal-tint: #2a2113; --ledger-role-renewal-ink: #fbbf24; --ledger-role-proposed-tint: #17233d; --ledger-role-proposed-ink: #ffc9bc; --ledger-head-from: #1e293b; --ledger-head-to: #172033; --ledger-head-border: #334155; --ledger-rule: #253044; --ledger-row-hover: #1c2b44; --ledger-total-rule: #cbd5e1; --ledger-delta-up: #fca5a5; --ledger-delta-down: #6ee7b7; --cmf-visual-surface: #111b27; --cmf-visual-surface-raised: #172433; --cmf-visual-rail: #0b1520; --cmf-visual-rule: #26394b; --cmf-visual-rule-strong: #61788e; --cmf-visual-edge: #6d8398; --cmf-visual-ink: #f1f6fb; --cmf-visual-ink-secondary: #c3d0dc; --cmf-visual-ink-tertiary: #94a7b8; --cmf-visual-command: #72dff5; --cmf-visual-command-hover: #9beafa; --cmf-visual-command-ink: #071a22; --cmf-accent: var(--cmf-visual-command); --cmf-toggle-off: #26394b; --cmf-toggle-knob: #f1f6fb; --cmf-visual-command-tint: #123541; --cmf-visual-command-tint-strong: #174b5a; --cmf-visual-info: #72dff5; --cmf-visual-ready: #6fe0aa; --cmf-visual-review: #f6c67b; --cmf-visual-danger: #ffaaa5; --cmf-visual-staged: #a9b8ff; --cmf-visual-disabled-surface: #1b2837; --cmf-visual-disabled-ink: #8799aa; --cmf-visual-focus-ring: rgb(114 223 245 / 34%); --cmf-visual-folio: rgb(114 223 245 / 22%); --cmf-visual-shadow: 0 28px 72px rgb(0 0 0 / 48%), 0 8px 24px rgb(0 0 0 / 28%); --cmf-visual-plan-current: #7c8ca2; --cmf-visual-plan-proposed: #c3d0dc; --cmf-visual-plan-alt: #8fa9c4; --cmf-visual-ready-tint: #0f2b21; --cmf-visual-review-tint: #2b2210; --cmf-visual-danger-tint: #311416; --cmf-visual-info-tint: #123541; --cmf-visual-signal: #72dff5; --cmf-visual-signal-hover: #9beafa; --cmf-visual-signal-text: #9beafa; --cmf-visual-signal-tint: #123541; --cmf-visual-focus: #72dff5; } /* ========================================================================== Accessibility - Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-slower: 0ms; } } /* ========================================================================== High Contrast Mode Support ========================================================================== */ @media (prefers-contrast: more) { :root { --color-gray-200: #000000; --color-gray-300: #000000; --color-gray-600: #000000; --color-gray-900: #000000; --shadow-sm: 0 0 0 1px #000000; --shadow-md: 0 0 0 2px #000000; --shadow-lg: 0 0 0 2px #000000; } }