/* * SPDX-License-Identifier: AGPL-3.0-or-later * SPDX-FileCopyrightText: 2026 Woodfine Capital Projects Inc. */ /* tokens.css — "The Plan Room" (2026-07-09 v3 redesign). Every hex value below is copied verbatim from the visual-direction spec's color_system, which itself traces each value to a computed/measured selector on home.woodfinegroup.com's live tokens.css. No invented hues — see BRIEF-bim-v3-hyperscaler-redesign.md. The reserved machine-layer accent (#234ED8) is used ONLY on IFC/DTCG download chips, /api links, and verification badges — never on nav, headings, or general UI. */ :root { /* ---- Light theme — "day paper" ---- */ --bim-bg-page: #F7F9FA; /* --m-grey-50 / --m-surface-page */ --bim-bg-surface: #FFFFFF; /* --m-white / --m-surface-raised */ --bim-hairline: #E6E7E8; /* --m-grey-200 / --m-surface-section / --m-border */ --bim-border: #E6E7E8; --bim-border-subtle: #E6E7E8; --bim-border-strong: #C8CCD1; /* --m-border-strong / --m-grey-350 */ --bim-accent: #164679; /* --m-navy-700 — masthead, links, primary actions, drawing line-work */ --bim-accent-active: #10365C; /* --m-navy-800 — hover/active step; secondary drawing line weight */ --bim-accent-hover: #1D5795; /* --m-navy-600 — link hover, focus ring */ --bim-accent-subtle: #E8EEF5; /* --m-navy-100 — selection bg / navy wash / zone fills */ /* Round 10 (2026-07-11): theme-correct pen pair for diagram line-work. --bim-accent/--bim-accent-active swap perceived hierarchy between light and dark (accent-active is a near-white highlight in dark mode, not a "secondary" step) — using them directly for primary/secondary diagram strokes was the root cause of a real dark-mode contrast failure (2.1:1, fails WCAG). Diagram code should use these aliases, never the raw accent tokens, for line-work. */ --bim-pen-primary: var(--bim-accent); --bim-pen-secondary: var(--bim-accent-active); --bim-fg: #111827; /* --m-ink-900 — body text on light */ --bim-fg-secondary: #54595D; /* --m-ink-550 — muted text, captions, provenance lines */ --bim-fg-muted: #6B7280; /* --m-ink-500 / --m-ink-muted — AA-safe small text on light */ --bim-fg-faint: #6B7280; --bim-fg-caption: #54595D; --bim-on-chrome: #FFFFFF; /* primary text on navy chrome */ --bim-on-chrome-muted: #B4C5D5; /* --m-slate-300 — text/line-work on navy chrome */ --bim-heading: #111827; /* --m-ink-900 — light-mode heading color; dark theme overrides to #FFFFFF below */ --bim-bg-sidebar: #E6E7E8; --bim-bg-subtle: #E6E7E8; --bim-bg-panel: #E8E8E8; --bim-bg-tertiary: #E8E8E8; --bim-bg-code: #1A1A1A; --bim-nav-hover-bg: #E8EEF5; /* Reserved machine-layer accent — [data-brand=pointsav] --m-navy-700 override in the shared brand file. IFC/DTCG download chips, /api links, verification badges ONLY. */ --bim-machine-accent: #234ED8; --bim-machine-accent-bg: #E8EEF5; --bim-header-height: 56px; --bim-header-stack: var(--bim-header-height); --bim-sidebar-width: 272px; --bim-radius-chip: 999px; --bim-radius-control: 6px; --bim-radius-card: 10px; --bim-radius-none: 0; --bim-radius-sm: 4px; --bim-radius-md: 6px; --bim-radius-lg: 8px; /* Round 6 (2026-07-10): the SVG "draw-on" system (bim.js drawOnAnimate) previously carried its duration/easing/stagger as hardcoded JS magic numbers. Formalized as real motion tokens here — bim.js reads these via getComputedStyle rather than hardcoding, so the whole drafting system tunes from one place, themeable per surface if a future context (e.g. the homepage hero) wants a different pace without a second set of numbers buried in script. */ --bim-motion-drawon-duration: 600ms; --bim-motion-drawon-easing: ease; --bim-motion-drawon-stagger: 12ms; --bim-motion-drawon-stagger-cap: 40; /* AEC semantic status colors — unchanged, unrelated to the visual-direction reset (regulation/compliance status display). */ --bim-safe: #54924E; --bim-safe-bg: #ECFDF3; --bim-warning: #B54708; --bim-warning-bg: #FFF8ED; --bim-mep: #0E7490; --bim-mep-bg: #ECFEFF; --bim-error: #B42318; --bim-error-bg: #FEF3F2; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---- Dark theme — "night paper" ---- --m-ink-950 (#0E1117) is a real, defined-but-previously-unrendered Woodfine token, repurposed as the dark-mode ground per the visual- direction spec — every dark value below still traces to the same home.woodfinegroup.com token file. Applied as a COMPLETE token-pair system: every surface (including the footer and the plan diagrams) flips together — no half-inverted states. */ :root[data-theme="dark"] { --bim-bg-page: #0E1117; /* --m-ink-950 */ --bim-bg-surface: #0B2340; /* --m-navy-900 */ --bim-hairline: rgba(180, 197, 213, 0.16); --bim-border: rgba(180, 197, 213, 0.16); --bim-border-subtle: rgba(180, 197, 213, 0.10); --bim-border-strong: rgba(180, 197, 213, 0.34); --bim-accent: #1D5795; /* --m-navy-600 — dark-mode link/accent step */ --bim-accent-active: #B4C5D5; --bim-accent-hover: #B4C5D5; /* --m-slate-300 — brightened hover, still in-palette */ --bim-accent-subtle: rgba(29, 87, 149, 0.22); /* Round 10 (2026-07-11): roles swap in dark mode — --bim-accent-active (#B4C5D5) is the bright, high-contrast step here, not --bim-accent (#1D5795), so the "primary" pen must point at the token that's actually primary-weight in this theme. This is the fix for the dark-mode diagram-text contrast failure. */ --bim-pen-primary: var(--bim-accent-active); --bim-pen-secondary: var(--bim-accent); --bim-fg: #B4C5D5; /* --m-slate-300 — dark-mode ink + drawing line-work */ --bim-fg-secondary: #B4C5D5; --bim-fg-muted: #8CA0B4; /* --m-slate-300 dimmed toward ground; same hue family */ --bim-fg-faint: #8CA0B4; --bim-fg-caption: #8CA0B4; --bim-on-chrome: #FFFFFF; --bim-on-chrome-muted: #B4C5D5; --bim-heading: #FFFFFF; /* --m-white / --m-ink-on-chrome — dark-mode headings, overrides light default above */ --bim-bg-sidebar: #0B2340; --bim-bg-subtle: rgba(180, 197, 213, 0.08); --bim-bg-panel: #0B2340; --bim-bg-tertiary: rgba(180, 197, 213, 0.08); --bim-nav-hover-bg: rgba(180, 197, 213, 0.10); --bim-machine-accent: #5E86E8; /* --m-navy-700 override lightened toward --m-slate-300 for AA on dark ground */ --bim-machine-accent-bg: rgba(35, 78, 216, 0.18); }