/* * themes.css * BEE Registry — Colour variables for dark and light mode * All colours are defined here as CSS custom properties (variables). * Every other file references these variables — never hard-coded colours. * * Usage: * The element gets either no attribute (dark, the default) * or data-theme="light" when the user toggles light mode. */ /* ============================================================ DARK MODE (default) Applied when: no data-theme attribute, or data-theme="dark" ============================================================ */ :root, [data-theme="dark"] { /* Brand */ --color-gold: #ebb807; --color-gold-dim: #c99e06; --color-gold-bg: rgba(235, 184, 7, 0.10); --color-gold-border: rgba(235, 184, 7, 0.28); --color-navy: #003366; --color-navy-mid: #0a4a8f; /* Page backgrounds */ --bg-page: #1f1f1f; --bg-surface: #252525; --bg-raised: #2b2b2b; --bg-app-content: var(--bg-raised); --bg-hover: #333333; --bg-active: #3d3d3d; /* Rail */ --bg-rail: #171717; --rail-icon-color: #555555; --rail-icon-active: var(--color-gold); --rail-active-bg: #1e1e1e; --rail-active-border: var(--color-gold); /* Borders */ --border-subtle: #3a3a3a; --border-medium: #4a4a4a; --border-strong: #5a5a5a; /* Text */ --text-primary: #d4d4d4; --text-secondary: #9a9a9a; --text-muted: #636363; --text-disabled: #444444; --text-inverse: #111111; --text-link: #5a9fd4; --text-link-hover: #7ab8e8; /* Section headings */ --heading-bg: var(--bg-raised); --heading-text: var(--text-secondary); --heading-icon: var(--color-gold); /* Company banner */ --banner-bg: var(--color-navy); --banner-border: var(--color-gold); --banner-text: #ffffff; --banner-text-muted: rgba(255, 255, 255, 0.50); --banner-init-bg: rgba(235, 184, 7, 0.12); --banner-init-border: rgba(235, 184, 7, 0.35); --banner-init-text: var(--color-gold); /* Cards */ --card-bg: var(--bg-surface); --card-border: var(--border-subtle); --card-shadow: none; --card-head-bg: var(--bg-raised); /* Table */ --table-head-bg: var(--bg-raised); --table-head-text: var(--text-muted); --table-row-border: var(--border-subtle); --table-row-hover: rgba(255, 255, 255, 0.025); /* Inputs */ --input-bg: #333333; --input-border: var(--border-medium); --input-border-focus: var(--color-gold); --input-text: var(--text-primary); --input-placeholder: var(--text-muted); /* Buttons */ --btn-bg: transparent; --btn-border: var(--border-medium); --btn-text: var(--text-secondary); --btn-hover-bg: var(--bg-hover); --btn-hover-text: var(--text-primary); --btn-primary-bg: var(--color-gold); --btn-primary-text: #111111; --btn-primary-hover-bg: var(--color-gold-dim); --btn-danger-bg: transparent; --btn-danger-text: #d06060; --btn-danger-hover-bg: rgba(208, 96, 96, 0.12); /* Badges / pills */ --badge-gold-bg: rgba(235, 184, 7, 0.18); --badge-gold-text: var(--color-gold); --badge-navy-bg: rgba(0, 51, 102, 0.45); --badge-navy-text: #7aabdf; --badge-green-bg: rgba(76, 175, 125, 0.15); --badge-green-text: #6dbb80; --badge-red-bg: rgba(208, 96, 96, 0.15); --badge-red-text: #d06060; /* Status icons */ --icon-check: #6dbb80; --icon-cross: #555555; --icon-warning: var(--color-gold); --icon-danger: #d06060; --icon-info: #5a9fd4; /* Info / alert box */ --alert-bg: rgba(235, 184, 7, 0.07); --alert-border: rgba(235, 184, 7, 0.25); --alert-text: var(--text-secondary); --alert-icon: var(--color-gold); /* Topbar */ --topbar-bg: var(--bg-surface); --topbar-border: var(--border-subtle); /* Toggle button */ --toggle-bg: transparent; --toggle-border: var(--border-medium); --toggle-text: var(--text-secondary); --toggle-icon: var(--text-secondary); /* Scrollbar */ --scrollbar-track: var(--bg-surface); --scrollbar-thumb: var(--border-medium); --scrollbar-thumb-hover: var(--border-strong); } /* ============================================================ LIGHT MODE Applied when: data-theme="light" on ============================================================ */ [data-theme="light"] { /* Brand — same gold and navy */ --color-gold: #ebb807; --color-gold-dim: #c99e06; --color-gold-bg: rgba(235, 184, 7, 0.10); --color-gold-border: rgba(235, 184, 7, 0.35); --color-navy: #003366; --color-navy-mid: #0a4a8f; /* Page backgrounds */ --bg-page: #f0f2f5; --bg-surface: #ffffff; --bg-raised: #f8f8f8; --bg-app-content: #E3E3E3; --bg-hover: #f0f0f0; --bg-active: #e8e8e8; /* Rail — stays navy in light mode for brand consistency */ --bg-rail: #003366; --rail-icon-color: rgba(255, 255, 255, 0.35); --rail-icon-active: var(--color-gold); --rail-active-bg: rgba(0, 0, 0, 0.15); --rail-active-border: var(--color-gold); /* Borders */ --border-subtle: #e0e0e0; --border-medium: #d0d0d0; --border-strong: #b0b0b0; /* Text */ --text-primary: #1a1a1a; --text-secondary: #555555; --text-muted: #aaaaaa; --text-disabled: #cccccc; --text-inverse: #ffffff; --text-link: #003366; --text-link-hover: #0a4a8f; /* Section headings */ --heading-bg: #f8f8f8; --heading-text: #555555; --heading-icon: #003366; /* Company banner — stays navy/gold */ --banner-bg: var(--color-navy); --banner-border: var(--color-gold); --banner-text: #ffffff; --banner-text-muted: rgba(255, 255, 255, 0.55); --banner-init-bg: rgba(235, 184, 7, 0.15); --banner-init-border: rgba(235, 184, 7, 0.40); --banner-init-text: var(--color-gold); /* Cards */ --card-bg: #ffffff; --card-border: #e0e0e0; --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); --card-head-bg: #f8f8f8; /* Table */ --table-head-bg: #f8f8f8; --table-head-text: #aaaaaa; --table-row-border: #f0f0f0; --table-row-hover: #fafafa; /* Inputs */ --input-bg: #ffffff; --input-border: #d0d0d0; --input-border-focus: var(--color-navy); --input-text: #1a1a1a; --input-placeholder: #aaaaaa; /* Buttons */ --btn-bg: #ffffff; --btn-border: #d0d0d0; --btn-text: #555555; --btn-hover-bg: #f5f5f5; --btn-hover-text: #1a1a1a; --btn-primary-bg: var(--color-navy); --btn-primary-text: #ffffff; --btn-primary-hover-bg: var(--color-navy-mid); --btn-danger-bg: transparent; --btn-danger-text: #c0392b; --btn-danger-hover-bg: rgba(192, 57, 43, 0.08); /* Badges / pills */ --badge-gold-bg: rgba(235, 184, 7, 0.15); --badge-gold-text: #8a6200; --badge-navy-bg: rgba(0, 51, 102, 0.08); --badge-navy-text: #003366; --badge-green-bg: rgba(46, 125, 79, 0.10); --badge-green-text: #2e7d4f; --badge-red-bg: rgba(192, 57, 43, 0.08); --badge-red-text: #c0392b; /* Status icons */ --icon-check: #2e7d4f; --icon-cross: #bbbbbb; --icon-warning: #c99e06; --icon-danger: #c0392b; --icon-info: #003366; /* Info / alert box */ --alert-bg: rgba(235, 184, 7, 0.08); --alert-border: rgba(235, 184, 7, 0.30); --alert-text: #555555; --alert-icon: #c99e06; /* Topbar */ --topbar-bg: #ffffff; --topbar-border: #e0e0e0; /* Toggle button */ --toggle-bg: #ffffff; --toggle-border: #d0d0d0; --toggle-text: #555555; --toggle-icon: #555555; /* Scrollbar */ --scrollbar-track: #f0f0f0; --scrollbar-thumb: #d0d0d0; --scrollbar-thumb-hover: #b0b0b0; } /* ============================================================ WHITE LABEL / CLIENT THEME OVERRIDE Applied when: data-client="true" on When a client logs in, JavaScript reads their brand colours from the server and overrides only these two variables. Everything else (backgrounds, text, borders) stays as the user's chosen dark or light theme. JavaScript sets these like this: document.documentElement.style.setProperty('--client-primary', '#e63946'); document.documentElement.style.setProperty('--client-secondary', '#1d3557'); These two variables then flow into all the brand colour slots below, replacing BEE Registry gold and navy. ============================================================ */ [data-client="true"] { /* Client brand colours — set by JS on login */ --client-primary: #ebb807; /* fallback to BEE Registry gold */ --client-secondary: #003366; /* fallback to BEE Registry navy */ /* Override all gold references with client primary */ --color-gold: var(--client-primary); --color-gold-dim: var(--client-primary); --color-gold-bg: color-mix(in srgb, var(--client-primary) 12%, transparent); --color-gold-border: color-mix(in srgb, var(--client-primary) 30%, transparent); /* Override all navy references with client secondary */ --color-navy: var(--client-secondary); --color-navy-mid: var(--client-secondary); /* Banner uses client colours */ --banner-bg: var(--client-secondary); --banner-border: var(--client-primary); --banner-init-bg: color-mix(in srgb, var(--client-primary) 12%, transparent); --banner-init-border: color-mix(in srgb, var(--client-primary) 30%, transparent); --banner-init-text: var(--client-primary); /* Rail active state uses client primary */ --rail-icon-active: var(--client-primary); --rail-active-border: var(--client-primary); /* Buttons use client colours */ --btn-primary-bg: var(--client-primary); --btn-primary-hover-bg: var(--client-primary); /* Badges use client colours */ --badge-gold-bg: color-mix(in srgb, var(--client-primary) 15%, transparent); --badge-gold-text: var(--client-primary); --badge-navy-bg: color-mix(in srgb, var(--client-secondary) 15%, transparent); --badge-navy-text: var(--client-secondary); /* Heading icons use client primary */ --heading-icon: var(--client-primary); /* Alert icons use client primary */ --alert-icon: var(--client-primary); --alert-border: color-mix(in srgb, var(--client-primary) 30%, transparent); --alert-bg: color-mix(in srgb, var(--client-primary) 7%, transparent); } /* ── Dark mode + client theme combined ── */ [data-theme="dark"][data-client="true"] { --rail-active-bg: color-mix(in srgb, var(--client-primary) 10%, transparent); --input-border-focus: var(--client-primary); --text-link: color-mix(in srgb, var(--client-primary) 70%, white); } /* ── Light mode + client theme combined ── */ [data-theme="light"][data-client="true"] { --bg-rail: var(--client-secondary); --rail-icon-color: rgba(255, 255, 255, 0.35); --btn-primary-bg: var(--client-secondary); --btn-primary-hover-bg: var(--client-primary); --input-border-focus: var(--client-secondary); --text-link: var(--client-secondary); --heading-icon: var(--client-secondary); --badge-gold-text: color-mix(in srgb, var(--client-primary) 80%, black); }