/* ============================================================ Bell Integration 2026 - Skills Search design tokens ------------------------------------------------------------ THE ONLY FILE THAT DEFINES COLOURS. Everything else (CSS, templates, JS charts) reads these custom properties. Layers: 1. Brand palette - raw Bell 2026 colours (same in both themes) 2. Dark theme - default (:root and [data-theme="dark"]) 3. Light theme - [data-theme="light"] 4. Legacy aliases - older variable names still used in pages To rebrand: change layer 1 and the semantic values in 2 and 3. To add a colour: add a semantic token in BOTH themes, then use var(--token). For transparency use color-mix(in srgb, var(--token) 15%, transparent). JS reads tokens through SSTheme.token('--name') (static/js/theme.js). ============================================================ */ :root { /* ---- 1. Brand palette (Bell Integration 2026) ---- */ --bell-navy: #111D38; --bell-magenta: #DF0D5E; --bell-slate: #29344C; --bell-blue-deep: #104A7F; --bell-blue-bright: #0887C8; --bell-violet-deep: #170D35; --bell-violet: #2E2549; --bell-grey-rule: #D7DBDD; --bell-grey-band: #F6F7F8; --bell-white: #FFFFFF; --bell-black: #000000; --bell-gradient-mark: linear-gradient(135deg, var(--bell-magenta) 0%, var(--bell-blue-bright) 100%); /* External brand colours (other companies' identities: not themed) */ --brand-teams: #6264A7; --brand-aws: #F29A2E; /* softened from #FF9900 for a calmer, more professional badge */ --brand-microsoft: #0078D4; --brand-vmware: #696566; --brand-redhat: #CC0000; --brand-google: #4285F4; --brand-comptia: #C8202F; --brand-cisco: #1BA0D7; --brand-hashicorp: #7B42BC; --brand-cncf: #446CA9; /* Document / "paper" colours: the profile preview and exports look like the printed Bell document in both themes, so these are not themed. */ --doc-paper: #FFFFFF; --doc-ink: #111D38; --doc-text: #2B3445; --doc-muted: #5E6980; --doc-faint: #6B7488; --doc-rule: #D7DBDD; --doc-band: #F6F7F8; --doc-accent: #104A7F; --doc-accent-soft: #E7EEF6; --doc-highlight: #DF0D5E; --doc-success: #13795B; --doc-success-soft: #E6F4EE; --doc-warning: #A85B06; --doc-danger: #C8283D; --doc-danger-soft: #FBE9EC; --doc-warning-soft: #FBF1E2; /* ---- Non-colour tokens ---- */ --sidebar-width: 260px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --font-stack: Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-mono: 'Cascadia Code', Consolas, 'SF Mono', 'Roboto Mono', monospace; } /* ---- 2. Dark theme (default) ---- */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Grounds and surfaces */ --color-bg: #0A0E1C; --color-bg-secondary: #0E1427; --color-bg-tertiary: #141B33; --color-surface: #121931; --color-surface-hover: #19223F; --color-card: #10162C; --color-card-border: #232C4A; --color-input-bg: #0C1226; --color-input-border: #5A6699; /* Text */ --color-text-primary: #EEF1F7; --color-text-secondary: #B3BBCD; --color-text-muted: #8791AA; --color-text-inverse: #111D38; /* Interactive */ --color-primary: #DF0D5E; /* Bell magenta: buttons, active states; white text sits on it */ --color-primary-light: #C9527D; /* muted rose: links, icons and accent text on dark grounds */ --color-primary-dark: #A80A4A; --color-on-primary: #FFFFFF; --color-accent: #D92A6E; /* Bell magenta: highlights and focus only, use sparingly */ --color-on-accent: #FFFFFF; --color-focus-ring: #D92A6E; /* Status (always pair with an icon or label) */ --color-success: #34C38F; --color-warning: #F2B441; --color-danger: #F0616D; --color-info: #4DB3EA; --color-at-risk: #F08A4B; /* between warning and danger */ --color-on-status: #0A0E1C; /* Vendor cert badge label: % of vendor colour mixed into primary text */ --cert-text-mix: 55%; /* Role identity (badges). Text-safe on a 15% tint of itself. */ --role-admin: #F46A9C; --role-manager: #4DB3EA; --role-employee: #34C38F; --role-linemanager: #F2B441; /* Overlays and effects */ --color-tint: #FFFFFF; /* subtle layers: color-mix(in srgb, var(--color-tint) 6%, transparent) */ --color-shadow: #000000; --color-overlay: color-mix(in srgb, #000000 70%, transparent); --shadow-sm: 0 2px 8px color-mix(in srgb, var(--color-shadow) 25%, transparent); --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-shadow) 35%, transparent); --shadow-lg: 0 8px 32px color-mix(in srgb, var(--color-shadow) 45%, transparent); --shadow-glow: 0 0 20px color-mix(in srgb, var(--color-primary) 22%, transparent); /* Sidebar (navy in both themes, so it always uses the white logo) */ --sidebar-bg: #080C19; --sidebar-border: #1B2340; /* Raised sidebar: soft cast shadow + faint inner edge highlight instead of a hard line */ --sidebar-shadow: 8px 0 32px color-mix(in srgb, #000000 70%, transparent), inset -1px 0 0 color-mix(in srgb, #FFFFFF 5%, transparent); /* Same idea for the raised right-hand panel (search chat), cast to the left */ --panel-shadow-left: -12px 0 40px color-mix(in srgb, #000000 75%, transparent), inset 1px 0 0 color-mix(in srgb, #FFFFFF 5%, transparent); /* Premium cards: faint top-left sheen, soft border, layered shadow with a top highlight */ --card-surface: linear-gradient(160deg, #161E3B 0%, #10162C 60%, #0E1428 100%); --card-border-soft: color-mix(in srgb, var(--color-card-border) 75%, transparent); --card-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 6%, transparent), 0 10px 28px color-mix(in srgb, #000000 38%, transparent); --card-shadow-hover: inset 0 1px 0 color-mix(in srgb, #FFFFFF 8%, transparent), 0 14px 36px color-mix(in srgb, #000000 50%, transparent); --sidebar-text: #B3BBCD; --sidebar-text-strong: #FFFFFF; --sidebar-text-muted: #7F89A3; --sidebar-hover-bg: color-mix(in srgb, #FFFFFF 6%, transparent); --sidebar-active-bg: color-mix(in srgb, var(--bell-magenta) 20%, transparent); --sidebar-active-text: #FFFFFF; --sidebar-accent: #E8598A; /* Charts: categorical order is fixed (validated for colour-blind separation in this order). Series 8+ fold into "Other". Text on charts uses --chart-text, never a series colour. */ --chart-1: #1C9AD9; /* Bell blue */ --chart-2: #E8337A; /* Bell magenta */ --chart-3: #C98500; /* amber */ --chart-4: #199E70; /* aqua */ --chart-5: #D95926; /* orange */ --chart-6: #9085E9; /* violet */ --chart-7: #2FA84F; /* green */ --chart-other: #5B6582; --chart-muted-fill: #2C3560; /* fade target for weak bubbles; white text sits on it */ --chart-text: #B3BBCD; --chart-text-strong: #EEF1F7; --chart-grid: color-mix(in srgb, #FFFFFF 8%, transparent); --chart-axis: #3A4566; --chart-surface: #121931; /* Sequential ramp, low -> high (low recedes into the dark surface) */ --chart-seq-1: #0D3560; --chart-seq-2: #104A7F; --chart-seq-3: #0A6BA3; --chart-seq-4: #0887C8; --chart-heat-mid: #0887C8; /* heatmap 6-9 bucket; paired with --chart-surface text */ --chart-seq-5: #3FA0D6; --chart-seq-6: #7FC0E6; --chart-seq-7: #B9DDF2; } /* ---- 3. Light theme ---- */ :root[data-theme="light"] { color-scheme: light; --color-bg: #F4F6F8; --color-bg-secondary: #EDF0F4; --color-bg-tertiary: #E4E8EE; --color-surface: #FFFFFF; --color-surface-hover: #F2F5F9; --color-card: #FFFFFF; --color-card-border: #D7DBDD; --color-input-bg: #FFFFFF; --color-input-border: #8A94A6; --color-text-primary: #111D38; --color-text-secondary: #3E495E; --color-text-muted: #5A6479; --color-text-inverse: #FFFFFF; --color-primary: #DF0D5E; --color-primary-light: #B8305C; --color-primary-dark: #8C0A44; --color-on-primary: #FFFFFF; --color-accent: #DF0D5E; --color-on-accent: #FFFFFF; --color-focus-ring: #DF0D5E; --color-success: #0F6B50; --color-warning: #935008; --color-danger: #B42236; --color-info: #095C8F; --color-at-risk: #B8480F; --color-on-status: #FFFFFF; --cert-text-mix: 45%; --role-admin: #B80A4D; --role-manager: #095C8F; --role-employee: #0F6B50; --role-linemanager: #935008; --color-tint: #111D38; --color-shadow: #111D38; --color-overlay: color-mix(in srgb, #111D38 45%, transparent); --shadow-sm: 0 1px 3px color-mix(in srgb, var(--color-shadow) 8%, transparent); --shadow-md: 0 4px 14px color-mix(in srgb, var(--color-shadow) 10%, transparent); --shadow-lg: 0 10px 30px color-mix(in srgb, var(--color-shadow) 14%, transparent); --shadow-glow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); --sidebar-bg: #111D38; --sidebar-border: #22304F; --sidebar-shadow: 6px 0 24px color-mix(in srgb, #0B1630 22%, transparent), inset -1px 0 0 color-mix(in srgb, #FFFFFF 6%, transparent); --panel-shadow-left: -6px 0 24px color-mix(in srgb, #0B1630 12%, transparent); --card-surface: linear-gradient(160deg, #FFFFFF 0%, #FAFBFD 100%); --card-border-soft: color-mix(in srgb, var(--color-card-border) 80%, transparent); --card-shadow: 0 1px 2px color-mix(in srgb, #0B1630 6%, transparent), 0 8px 24px color-mix(in srgb, #0B1630 8%, transparent); --card-shadow-hover: 0 2px 4px color-mix(in srgb, #0B1630 8%, transparent), 0 14px 32px color-mix(in srgb, #0B1630 13%, transparent); --sidebar-text: #C9D0DE; --sidebar-text-strong: #FFFFFF; --sidebar-text-muted: #8D97B0; --sidebar-hover-bg: color-mix(in srgb, #FFFFFF 8%, transparent); --sidebar-active-bg: color-mix(in srgb, var(--bell-magenta) 26%, transparent); --sidebar-active-text: #FFFFFF; --sidebar-accent: #E8598A; --chart-1: #0887C8; --chart-2: #DF0D5E; --chart-3: #EDA100; --chart-4: #1BAF7A; --chart-5: #EB6834; --chart-6: #4A3AA7; --chart-7: #008300; --chart-other: #9AA3B3; --chart-muted-fill: #5E6980; --chart-text: #3E495E; --chart-text-strong: #111D38; --chart-grid: color-mix(in srgb, #111D38 8%, transparent); --chart-axis: #B9C1CC; --chart-surface: #FFFFFF; --chart-seq-1: #B9DDF2; --chart-seq-2: #7FC0E6; --chart-seq-3: #3FA0D6; --chart-seq-4: #0887C8; --chart-heat-mid: #0A7AB8; --chart-seq-5: #0A6BA3; --chart-seq-6: #104A7F; --chart-seq-7: #0D3560; } /* ---- 4. Legacy aliases (older names used across pages and JS) ---- */ :root { --color-sidebar: var(--sidebar-bg); --color-border: var(--color-card-border); --color-card-bg: var(--color-card); --color-bg-primary: var(--color-bg); --color-surface-secondary: var(--color-bg-secondary); --color-input-focus: var(--color-primary-light); --color-hover: color-mix(in srgb, var(--color-primary) 12%, transparent); --color-glass-bg: color-mix(in srgb, var(--color-surface) 88%, transparent); --color-glass-border: color-mix(in srgb, var(--color-primary-light) 18%, transparent); --color-accent-green: var(--color-success); --color-accent-red: var(--color-danger); --color-accent-orange: var(--color-warning); --color-accent-blue: var(--color-info); --color-accent-purple: var(--chart-6); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --surface: var(--color-surface); --card-bg: var(--color-card); --card-border: var(--color-card-border); } /* ---- 5. Always-dark surfaces ---- The sidebar and the sign-in artwork panel are navy in both themes, so inside them the general tokens are re-pointed at light-on-dark values. */ .sidebar, .auth-art { color-scheme: dark; --color-text-primary: var(--sidebar-text-strong); --color-text-secondary: var(--sidebar-text); --color-text-muted: var(--sidebar-text-muted); --color-card-border: var(--sidebar-border); --color-border: var(--sidebar-border); --color-primary: var(--bell-magenta); --color-primary-light: var(--sidebar-accent); --color-tint: var(--bell-white); --color-danger: #F0616D; --color-accent-red: #F0616D; --color-hover: var(--sidebar-hover-bg); color: var(--color-text-primary); }