/* ============================================================================= ShiftFuel role-based theme tokens (THE single rebrand surface) ----------------------------------------------------------------------------- Load this BEFORE styles.css. Each entry HTML sets the role at the root level: green (default) blue purple Everything role-colored resolves from these tokens. styles.css re-points its legacy brand vars (--sf-teal, --sf-sage, …) at --sf-primary/--sf-accent, so the whole app inherits the active role palette automatically. To rebrand a role in the future: edit ONLY the block below for that role. Do NOT hunt hardcoded hex values in the component sheets. NOTE: --sf-primary-rgb is a space-separated triple for translucent tints via rgb(var(--sf-primary-rgb) / ). Keep status colors (success / danger / warning / coral) OUT of this file — they are intentionally role-neutral. ========================================================================== */ :root, [data-theme="customer"] { /* Core ramp — Customer green */ --sf-primary: #0D3B3B; --sf-primary-dark: #062727; --sf-primary-soft: #12504D; --sf-primary-muted: #EAF2EA; --sf-primary-rgb: 13 59 59; --sf-accent: #A7BFA6; --sf-accent-soft: #EAF2EA; --sf-accent-rgb: 167 191 166; /* Surfaces / lines (largely role-neutral, re-declared per role only if tinted) */ --sf-surface: #FFFFFF; --sf-surface-soft: #F7F7F5; --sf-border: #D9E3DF; --sf-focus-ring: #0D3B3B; /* Header / top bar */ --sf-header-bg: linear-gradient(135deg, #0D3B3B, #062727); --sf-header-text: #FFFFFF; /* Primary button */ --sf-button-bg: #0D3B3B; --sf-button-text: #FFFFFF; /* Active nav / tab / sidebar */ --sf-nav-active-bg: #0D3B3B; --sf-nav-active-text: #FFFFFF; /* Pills / badges */ --sf-pill-bg: #EAF2EA; --sf-pill-text: #0D3B3B; /* Accent card edge + hero gradient stops */ --sf-card-accent: #A7BFA6; --sf-gradient-start: #0D3B3B; --sf-gradient-end: #062727; } [data-theme="worker"] { /* Core ramp — Worker blue (matches worker manifest + icon) */ --sf-primary: #0B3D5C; --sf-primary-dark: #062F45; --sf-primary-soft: #0F5A87; --sf-primary-muted: #E6F0F7; --sf-primary-rgb: 11 61 92; --sf-accent: #7FB3D5; --sf-accent-soft: #DCEAF4; --sf-accent-rgb: 127 179 213; --sf-surface: #FFFFFF; --sf-surface-soft: #F5F9FC; --sf-border: #D3E1EC; --sf-focus-ring: #0B3D5C; --sf-header-bg: linear-gradient(135deg, #0B3D5C, #062F45); --sf-header-text: #FFFFFF; --sf-button-bg: #0B3D5C; --sf-button-text: #FFFFFF; --sf-nav-active-bg: #0B3D5C; --sf-nav-active-text: #FFFFFF; --sf-pill-bg: #E6F0F7; --sf-pill-text: #0B3D5C; --sf-card-accent: #7FB3D5; --sf-gradient-start: #0B3D5C; --sf-gradient-end: #062F45; } [data-theme="admin"] { /* Core ramp — Admin purple (matches admin icon periwinkle accent) */ --sf-primary: #4B3F8F; --sf-primary-dark: #2E2657; --sf-primary-soft: #6B5FB0; --sf-primary-muted: #ECEBF7; --sf-primary-rgb: 75 63 143; --sf-accent: #7B8CDE; --sf-accent-soft: #E4E7F8; --sf-accent-rgb: 123 140 222; --sf-surface: #FFFFFF; --sf-surface-soft: #F7F6FB; --sf-border: #DEDAEE; --sf-focus-ring: #4B3F8F; --sf-header-bg: linear-gradient(135deg, #4B3F8F, #2E2657); --sf-header-text: #FFFFFF; --sf-button-bg: #4B3F8F; --sf-button-text: #FFFFFF; --sf-nav-active-bg: #4B3F8F; --sf-nav-active-text: #FFFFFF; --sf-pill-bg: #ECEBF7; --sf-pill-text: #4B3F8F; --sf-card-accent: #7B8CDE; --sf-gradient-start: #4B3F8F; --sf-gradient-end: #2E2657; }