/* * DealWorthIt semantic theme tokens (Phase 1A — theme foundation). * * This file defines the small --dwi-* token contract that brand theme files * (themes/theme-.css) override, and bridges the existing Metronic/ * Bootstrap variables (--bs-*, --kt-*) onto those tokens. * * Load order contract (see layout2.html / layout.html): * plugins.bundle.css -> style.bundle.css -> themes/tokens.css * -> themes/theme-.css -> common_styles.css -> page CSS * * Rules: * - data-theme (on ) stays reserved for light/dark mode — it is set * dynamically by scripts.bundle.js and must not be used for branding. * - data-brand (on ) carries brand/white-label identity, emitted by * the layouts from the PLATFORM constant. * - The :root values below are fallbacks equal to the current DealWorthIt * appearance, so pages rendered without a data-brand attribute (fragments, * embedded views) look exactly as they do today. * - The --bs- / --kt- bridge is gated per brand: it only applies to brands * that have a theme file. Brands still on their duplicated legacy bundle * (10xdealanalyzer, moguldealevaluator, syndicator) are intentionally NOT * bridged yet — their recolored bundle values must keep winning until * their theme files are created in a later phase. */ :root { /* Brand colors — current DealWorthIt values (zero visual change). */ --dwi-color-primary: #39D1FF; /* mirrors --kt-primary */ --dwi-color-primary-rgb: 57, 209, 255; /* mirrors --kt-primary-rgb */ --dwi-color-primary-strong: #1AB8E8; /* mirrors --kt-primary-active */ --dwi-color-primary-soft: #f1faff; /* mirrors --kt-primary-light (light mode) */ --dwi-color-accent: #00B2FF; /* mirrors --bs-primary */ --dwi-color-accent-rgb: 0, 178, 255; /* mirrors --bs-primary-rgb */ /* Neutrals — current bundle values; not yet bridged onto the --bs- and --kt- variables (defined for forward use by new components only). */ --dwi-color-page: #FFFFFF; /* mirrors --bs-body-bg (light) */ --dwi-color-surface: #ffffff; /* mirrors --kt-card-bg (light) */ --dwi-color-border: #eff2f5; /* mirrors --kt-border-color (light) */ --dwi-color-text: #181C32; /* mirrors --bs-body-color (light) */ --dwi-color-muted: #A1A5B7; /* mirrors --kt-text-muted (light) */ /* Shape & depth — current Metronic literals. */ --dwi-radius-sm: 0.325rem; --dwi-radius-md: 0.475rem; --dwi-radius-lg: 0.625rem; --dwi-shadow-card: 0px 0px 20px 0px rgba(76, 87, 125, 0.02); /* mirrors --kt-card-box-shadow (light) */ /* Typography — mirrors --app-font-sans in common_styles.css. */ --dwi-font-sans: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* * Phase 1D contract additions (source: docs/design/dealworthit-app.html). * These semantics are new — they have no pre-v3 "current appearance", so * the design value is the contract default in both this fallback layer and * the brand file. All are inert: no bridge and no component consumes them * yet. No dark-mode deltas — the dark emerald palette is proposed (not * applied) in docs/design/theme-flip-readiness-1d.md. */ --dwi-color-text-secondary: #2B3A35; --dwi-color-muted-soft: #9AA39E; --dwi-color-line: var(--dwi-color-border); /* alias; mode-aware via border */ --dwi-color-avatar: #E74C3C; /* one-off user-avatar coral */ --dwi-color-avatar-strong: #d8412f; /* avatar gradient end (profile header) */ --dwi-color-hover: #F5F7F6; --dwi-color-rail: #FBFCFC; --dwi-color-line-soft: #F0F3F1; --dwi-color-positive: #0E6E59; --dwi-color-negative: #BC4A3D; --dwi-color-negative-soft: rgba(188, 74, 61, 0.10); --dwi-color-warning: #B7791F; --dwi-color-warning-soft: rgba(183, 121, 31, 0.13); --dwi-color-clay: #C0705E; /* secondary data series (expense bars etc.) */ --dwi-shadow-hover: 0 4px 12px -4px rgba(20, 40, 30, 0.14); --dwi-shadow-raised: 0 8px 22px -10px rgba(20, 40, 30, 0.18); --dwi-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* * Page-shell width contract (responsive page-width system). * One shared set of page max-widths consumed by the .dwi-page-shell * variants in common_styles.css (authenticated app pages) and by the * report canvas in themes/theme-dealworthit-reports.css (report/public * surfaces, whose layouts do not load common_styles.css). Width follows * the information, not the monitor: * - form: focused single-purpose forms and guided intake * - report: document-style, reading-oriented pages (incl. legal docs) * - deal: underwriting/deal-detail workspaces (main + analysis rail) * - wide: the shared application canvas — dashboards, pipelines, * reports, markets, deals list, AND account management * (team/settings/billing/profile), so every in-app page * shares the same outer boundaries * (fluid pages use no token — max-width: none.) * --dwi-page-auth caps the LEGACY pre-login canvas (register_trial's * .auth-legacy-cap). The split-panel auth pages are full-bleed: their * backgrounds reach the viewport edges while the content columns anchor * to the panel seam (theme-dealworthit-auth.css). */ --dwi-page-form: 1200px; --dwi-page-report: 1100px; --dwi-page-deal: 1800px; /* deal-detail workspaces share the --wide canvas so their outer boundaries match dashboards/pipeline/reports/markets */ --dwi-page-wide: 1800px; --dwi-page-auth: 1440px; /* Pipeline status palette (kanban/pipeline surfaces). */ --dwi-status-new: #6366A8; --dwi-status-new-soft: rgba(99, 102, 168, 0.12); --dwi-status-market: #3E78A8; --dwi-status-market-soft: rgba(62, 120, 168, 0.12); --dwi-status-working: #B7791F; --dwi-status-working-soft: rgba(183, 121, 31, 0.13); --dwi-status-portfolio: #0E6E59; --dwi-status-portfolio-soft: rgba(14, 110, 89, 0.10); --dwi-status-lost: #BC4A3D; --dwi-status-lost-soft: rgba(188, 74, 61, 0.10); } /* Dark-mode deltas — mirror the bundle's [data-theme=dark] values. */ [data-theme=dark] { --dwi-color-primary-soft: #212e48; /* mirrors --kt-primary-light (dark) */ --dwi-color-page: #1e1e2d; /* mirrors --bs-body-bg (dark) */ --dwi-color-surface: #1e1e2d; /* mirrors --kt-card-bg (dark) */ --dwi-color-border: #2B2B40; /* mirrors --kt-border-color (dark) */ --dwi-color-text: #FFFFFF; /* mirrors --bs-body-color (dark) */ --dwi-color-muted: #565674; /* mirrors --kt-text-muted (dark) */ --dwi-shadow-card: none; /* mirrors --kt-card-box-shadow (dark) */ } /* * Bridge: re-point the framework's primary/accent variables at the semantic * tokens. html[data-brand=...] (specificity 0,1,1) outranks the bundle's * :root / [data-theme=...] blocks (0,1,0) in both light and dark mode. * * Only primary/accent variables are bridged in Phase 1A. Body/surface/border * variables stay on the bundle until the shell phases. --bs-light-primary * and --bs-active-primary are NOT bridged: they are not mode-switched in the * bundle, so mapping them onto mode-switched tokens would change dark mode. */ html[data-brand=dealworthit] { --bs-primary: var(--dwi-color-accent); --bs-primary-rgb: var(--dwi-color-accent-rgb); --kt-primary: var(--dwi-color-primary); --kt-primary-rgb: var(--dwi-color-primary-rgb); --kt-text-primary: var(--dwi-color-primary); --kt-primary-active: var(--dwi-color-primary-strong); --kt-primary-light: var(--dwi-color-primary-soft); /* Phase 1E: previously-dead bundle definitions (no var() consumers in the bundle; their values appear as literals handled by the generated theme-dealworthit-components.css) — bridged for consistency so any future consumer follows the brand. */ --bs-light-primary: var(--dwi-color-primary-soft); --bs-active-primary: var(--dwi-color-primary-strong); /* Phase 1E typography flip: body font flows common_styles.css body{font-family:var(--app-font-sans)} and the bundle's --bs-font-sans-serif -> --bs-body-font-family chain; both re-pointed here so DealWorthIt renders IBM Plex (loaded by the layouts). */ --app-font-sans: var(--dwi-font-sans); --bs-font-sans-serif: var(--dwi-font-sans); --bs-font-monospace: var(--dwi-font-mono); }