/* ========================================================================= Brand × mode theming — semantic tokens (STATIC, hand-authored) This file lives in public/ and is linked directly from index.html, so it is served verbatim and NEVER processed by Vite / Tailwind / Lightning CSS. That matters: Lightning folds a second root-matching token block into the shadcn :root at build and drops the name-colliding tokens (--muted/--accent /--border/--ring), which blanked the default RM theme (white background). Keeping these here sidesteps the optimizer entirely. The `:root.theme-…` selectors (specificity 0,2,0) also beat the shadcn `:root` (0,1,0) on the colliding tokens regardless of stylesheet order. Two brands (Ruimtemeesters default / Prophys opt-in) × two modes (light / .dark) = four quadrants. Exactly one brand class is always on (default theme-ruimtemeesters, hard-set in index.html). Prophys palette from the 2025 brand manual: Imperial Red #FA383B, Rich Black #00111C, White Smoke #F5F5F5, Chocolate Cosmos #61191B, font Exo 2. ========================================================================= */ /* Ruimtemeesters — light (default) */ :root.theme-ruimtemeesters { --bg: #f7f4ef; /* warm paper */ --bg-2: #efece6; /* warm fill */ --workspace-bg-overlay-top: rgba(247, 244, 239, 0.88); --workspace-bg-overlay-bot: rgba(247, 244, 239, 0.92); --workspace-header-bg: transparent; --surface: #ffffff; /* card */ --surface-2: #f9fafb; /* raised / hover */ --fg: #161620; /* ink */ --fg-2: #2b2b36; /* secondary text */ --muted: #9c885c; /* gold-taupe muted text (brand) */ --muted-2: #6b6b6b; /* neutral grey secondary text (admin/settings) */ --border: #e5e5e5; /* hairline */ --border-2: #d4d0c8; /* warm hairline */ --accent: #9c885c; /* brand accent (gold) */ --accent-strong: #7a6a47; --accent-fg: #ffffff; --action: #002ea3; /* royal-blue action/link */ --action-strong: #00227a; --action-fg: #ffffff; --action-wash: #eef2ff; --danger: #d4183d; --danger-fg: #ffffff; --ok: #16a34a; --warn: #f37021; /* "Actie nodig" orange */ --ring: #002ea3; --font-display: 'Abhaya Libre', Georgia, serif; --font-body: 'Futura PT', 'Futura', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; } /* Ruimtemeesters — dark */ :root.theme-ruimtemeesters.dark { --bg: #14151a; --bg-2: #1a1c25; --workspace-bg-overlay-top: rgba(20, 21, 26, 0.92); --workspace-bg-overlay-bot: rgba(20, 21, 26, 0.95); --workspace-header-bg: rgba(20, 21, 26, 0.6); --surface: #1a1c25; --surface-2: #22242e; --fg: #e8e8ed; --fg-2: #c9c9d4; --muted: #b8a87a; --muted-2: #9b9ba8; --border: #2a2a36; --border-2: #383b48; --accent: #b8a87a; --accent-strong: #a89c84; --accent-fg: #161620; --action: #93b4ff; --action-strong: #b9cdff; --action-fg: #0f1015; --action-wash: #1f2a52; --danger: #ff6b6b; --danger-fg: #1a1c25; --ok: #4ade80; --warn: #ff9a3c; --ring: #93b4ff; } /* Prophys — light (White Smoke base) */ :root.theme-prophys { --bg: #f5f5f5; /* white smoke */ --bg-2: #ececec; --workspace-bg-overlay-top: rgba(245, 245, 245, 0.90); --workspace-bg-overlay-bot: rgba(245, 245, 245, 0.94); --workspace-header-bg: transparent; --surface: #ffffff; --surface-2: #fafafa; --fg: #00111c; /* rich black */ --fg-2: #2a3540; --muted: #5e6b75; --muted-2: #6b7681; --border: #e0e2e4; --border-2: #cbd0d4; --accent: #fa383b; /* imperial red */ --accent-strong: #d92a2d; --accent-fg: #ffffff; --action: #fa383b; /* Prophys leads with red */ --action-strong: #d92a2d; --action-fg: #ffffff; --action-wash: #fdecec; --danger: #61191b; /* chocolate cosmos */ --danger-fg: #ffffff; --ok: #1f7a4a; --warn: #c2730f; --ring: #fa383b; --font-display: 'Exo 2', system-ui, sans-serif; --font-body: 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Prophys — dark (Rich Black base — the native brand look) */ :root.theme-prophys.dark { --bg: #00111c; /* rich black */ --bg-2: #04161f; --workspace-bg-overlay-top: rgba(0, 17, 28, 0.93); --workspace-bg-overlay-bot: rgba(0, 17, 28, 0.96); --workspace-header-bg: rgba(0, 17, 28, 0.6); --surface: #0a1a26; --surface-2: #13242f; --fg: #f5f5f5; /* white smoke */ --fg-2: #c8d0d6; --muted: #8b97a1; --muted-2: #8b97a1; --border: #1d2c38; --border-2: #2a3b48; --accent: #fa383b; --accent-strong: #ff5457; --accent-fg: #ffffff; --action: #fa383b; --action-strong: #ff5457; --action-fg: #ffffff; --action-wash: #2a1416; --danger: #ff6b6b; --danger-fg: #00111c; --ok: #4ade80; --warn: #ffb547; --ring: #fa383b; }