/* * BSC Command Center — shared design tokens (single source of truth) * ------------------------------------------------------------------ * Dark is the default ("Game Analytics" look). Light mode is opt-in via * the `data-theme="light"` attribute on , applied by shared/theme.js. * * This file defines ONLY color/font tokens (no layout rules) so it can be * safely linked into every sub-app without affecting structure/behavior. * * Specificity note: `:root[data-theme="light"]` (0,2,0) intentionally beats * any app-local `:root { --bg: ... }` (0,1,0) block, so apps that still * define their own dark primitives automatically pick up light overrides. */ :root, :root[data-theme="dark"] { /* ----- Primitive surfaces ----- */ --bg: #0d1117; --bg2: #161b22; --bg3: #21262d; --border: #30363d; /* ----- Primitive text ----- */ --text: #c9d1d9; --text2: #8b949e; --text-strong: #ffffff; /* ----- Primitive status / accent ----- */ --green: #3fb950; --red: #f85149; --yellow: #d29922; --blue: #58a6ff; --accent: #7c3aed; --accent-light: #9561f5; --accent-contrast: #ffffff; /* ----- Fonts ----- */ --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; /* ----- Semantic surfaces ----- */ --surface: var(--bg2); --surface-2: var(--bg3); --panel-bg: var(--bg2); --input-bg: var(--bg3); --modal-bg: var(--bg2); --modal-overlay: rgba(1, 4, 9, 0.8); --table-head-bg: var(--bg2); --table-row-hover: var(--bg2); --table-row-alt: var(--bg2); --shadow-color: rgba(0, 0, 0, 0.45); /* ----- Text roles ----- */ --muted: var(--text2); --brand-text: var(--text); --brand-bg: var(--bg); --focus: var(--accent); /* ----- Buttons ----- */ --btn-primary-bg: var(--accent); --btn-primary-text: #ffffff; --btn-primary-border: var(--accent); --btn-secondary-bg: var(--bg3); --btn-secondary-text: var(--text); --btn-secondary-border: var(--border); /* ----- Sidebar ----- */ --sidebar-bg: var(--bg2); --sidebar-text: var(--text); --sidebar-muted: var(--text2); --sidebar-border: var(--border); --sidebar-active-bg: var(--bg3); --sidebar-hover-bg: rgba(140, 149, 159, 0.15); /* ----- Form select chevron (visible on both themes) ----- */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%238b949e' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E"); } :root[data-theme="light"] { /* ----- Primitive surfaces (GitHub Primer light) ----- */ --bg: #ffffff; --bg2: #f6f8fa; --bg3: #eaeef2; --border: #d0d7de; /* ----- Primitive text ----- */ --text: #1f2328; --text2: #656d76; --text-strong: #0a0a0a; /* ----- Primitive status / accent ----- */ --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; --blue: #0969da; --accent: #7c3aed; --accent-light: #8250df; --accent-contrast: #ffffff; /* ----- Semantic surfaces ----- */ --modal-overlay: rgba(0, 0, 0, 0.45); --shadow-color: rgba(140, 149, 159, 0.25); /* ----- Form select chevron ----- */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23656d76' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E"); }