/* * STUDIOLOGY BRAND PACK * --------------------------------------------------------------------------- * This file defines the platform's brand identity as CSS custom properties: * the primary CTA colour (three shades), the secondary "electric" accent used * throughout the CRM/dashboard, and the two neutral brand tones. * * To skin a new franchise, do NOT edit this file - load a second stylesheet * after this one that redefines these same variables. Every value below is * Studiology's own current colour, so if a franchise stylesheet is absent, * nothing changes from how the platform looks today. * * Deliberately NOT included here: status/semantic colours (client health * scores, won/lost/draft states, PAID/GHOST badges). Those use Tailwind's * built-in emerald/red/amber palette directly, unrelated to the variables * below, and are not brand-configurable - every franchise keeps the same * red-means-bad/green-means-good language regardless of their brand colour. * * LOGOS: the platform logo is not a colour, so it isn't handled here - it * lives at public/img/brand/logo-white.png (used across the web app's dark * nav bars) and public/img/brand/logo.png (used server-side for the * Track Sheet PDF export cover page). To skin a franchise's logo, replace * those two files in place - no HTML/JS changes needed, same as this file. */ :root { /* Primary brand colour - CTA buttons, primary highlights, three shades for resting/hover states across the app's various button styles. */ --brand-primary-rgb: 16 185 129; /* emerald-500 #10b981 */ --brand-primary-dark-rgb: 5 150 105; /* emerald-600 #059669 */ --brand-primary-light-rgb: 52 211 153; /* emerald-400 #34d399 */ /* Secondary "electric" accent colour - CRM and dashboard highlights */ --brand-accent-rgb: 0 181 173; /* electric-teal #00B5AD */ /* Neutral brand tones */ --brand-midnight: #131B23; --brand-silver-grey: #E0E1E2; /* --- STRUCTURAL THEME COLOURS (0.54.0) --- --------------------------- These are NOT brand-configurable like the values above - they're the light/dark surface, border, and text scale used throughout the core pages (dashboard, lessons, CRM, account). Dark is the default and matches the platform's original look exactly (same values as the slate-950/900/800/200 etc classes it replaces); [data-theme="light"] on (set by themeToggle.js) overrides them. Referenced via Tailwind color names (theme-bg, theme-surface, ...) defined in each page's own tailwind.config block, using the same rgb(var(...) / ) pattern as the brand-primary colours above so Tailwind opacity modifiers (e.g. bg-theme-surface/40) keep working. */ --theme-bg-rgb: 2 6 23; /* slate-950 */ --theme-surface-rgb: 15 23 42; /* slate-900 */ --theme-surface-alt-rgb: 30 41 59; /* slate-800 */ --theme-border-rgb: 30 41 59; /* slate-800 */ --theme-border-subtle-rgb: 15 23 42; /* slate-900 */ --theme-text-rgb: 226 232 240; /* slate-200 */ --theme-text-muted-rgb: 148 163 184; /* slate-400 */ --theme-text-faint-rgb: 100 116 139; /* slate-500 */ --theme-heading-rgb: 255 255 255; /* white */ } [data-theme="light"] { --theme-bg-rgb: 248 250 252; /* slate-50 */ --theme-surface-rgb: 255 255 255; /* white */ --theme-surface-alt-rgb: 241 245 249; /* slate-100 */ --theme-border-rgb: 226 232 240; /* slate-200 */ --theme-border-subtle-rgb: 241 245 249; /* slate-100 */ --theme-text-rgb: 51 65 85; /* slate-700 */ --theme-text-muted-rgb: 100 116 139; /* slate-500 */ --theme-text-faint-rgb: 148 163 184; /* slate-400 */ --theme-heading-rgb: 15 23 42; /* slate-900 */ }