/* ============================================================================= Vhost-Specific Theme Overlays (E500-S01) Extends design-system.css with per-vhost accent colors. All four vhosts share the Vector-First base (same typography, spacing, surfaces, grid) and differ only in: - --vhost-accent (replaces --color-accent-cyan usage in track-specific UI) - --vhost-badge-color (for subtle brand indicators in nav / footer) Vhost classes are applied on . Default (no data-vhost) keeps cyan. ============================================================================= */ :root { /* Vhost accent defaults to cyan when no vhost is declared. */ --vhost-accent: var(--color-accent-cyan); --vhost-accent-hover: var(--color-accent-cyan-hover); --vhost-accent-muted: var(--color-accent-cyan-muted); --vhost-badge-color: var(--color-accent-cyan); } /* admin.brrain.io — signal red-orange for gravity + unignorable audit tone. */ [data-vhost="admin"] { --vhost-accent: #ff5a1f; --vhost-accent-hover: #ff7a47; --vhost-accent-muted: rgba(255, 90, 31, 0.15); --vhost-badge-color: #ff5a1f; } [data-theme="light"][data-vhost="admin"] { --vhost-accent: #cc3d00; --vhost-accent-hover: #a83200; --vhost-accent-muted: rgba(204, 61, 0, 0.12); --vhost-badge-color: #cc3d00; } /* app.brrain.io/boss — electric violet for loop/growth energy. */ [data-vhost="boss"] { --vhost-accent: #a855f7; --vhost-accent-hover: #c084fc; --vhost-accent-muted: rgba(168, 85, 247, 0.15); --vhost-badge-color: #a855f7; } [data-theme="light"][data-vhost="boss"] { --vhost-accent: #7e22ce; --vhost-accent-hover: #6b21a8; --vhost-accent-muted: rgba(126, 34, 206, 0.12); --vhost-badge-color: #7e22ce; } /* id.brrain.io — registry green (trust, identity, verified). */ [data-vhost="id"] { --vhost-accent: #10d99c; --vhost-accent-hover: #34e3ae; --vhost-accent-muted: rgba(16, 217, 156, 0.15); --vhost-badge-color: #10d99c; } [data-theme="light"][data-vhost="id"] { --vhost-accent: #047857; --vhost-accent-hover: #065f46; --vhost-accent-muted: rgba(4, 120, 87, 0.12); --vhost-badge-color: #047857; } /* exchange.brrain.io — amber for value/marketplace energy. */ [data-vhost="exchange"] { --vhost-accent: #f59e0b; --vhost-accent-hover: #fbbf24; --vhost-accent-muted: rgba(245, 158, 11, 0.15); --vhost-badge-color: #f59e0b; } [data-theme="light"][data-vhost="exchange"] { --vhost-accent: #b45309; --vhost-accent-hover: #92400e; --vhost-accent-muted: rgba(180, 83, 9, 0.12); --vhost-badge-color: #b45309; } /* ============================================================================= IBM Plex Sans (for "bOSS" brand mark + optional workspace display text) Served from Google Fonts via CSS @import in the layout; declared here so the family is reliably available. A local subset ships separately. ============================================================================= */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: local('IBM Plex Sans Medium'), url('/static/fonts/ibm-plex-sans/ibm-plex-sans-500.ttf') format('truetype'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: local('IBM Plex Sans SemiBold'), url('/static/fonts/ibm-plex-sans/ibm-plex-sans-600.ttf') format('truetype'); } /* ============================================================================= bOSS brand mark — rendered per E500-S03. "bOSS" with lowercase b + uppercase OSS, tracking -0.02em, weight 500. Falls back to the UI sans (Inter) if IBM Plex Sans is unavailable. ============================================================================= */ .brand-boss { font-family: 'IBM Plex Sans', var(--font-ui); font-weight: 500; letter-spacing: -0.02em; /* Explicitly no text-transform — the glyphs are authored as "bOSS". */ } .brand-boss__b { /* The lowercase b is part of the glyph sequence; no special styling. */ } .brand-boss__oss { /* Keep OSS slightly tighter for visual balance with the lowercase b. */ letter-spacing: -0.03em; } .brand-boss--sm { font-size: var(--text-base); } .brand-boss--md { font-size: var(--text-xl); } .brand-boss--lg { font-size: var(--text-3xl); } .brand-boss--xl { font-size: var(--text-5xl); }