.manager-body, .auth-body-manager {
    --manager-theme-selected: #32678A;
    --manager-accent: #32678A;
    --manager-accent-light: #537F9D;
    --manager-accent-dark: #264D68;
    --manager-accent-deep: #1B384B;
    --manager-accent-soft: #E6EDF1;
    --manager-mint: #B1C5D3;
    --manager-accent-rgb: 50, 103, 138;
    --manager-deep-rgb: 27, 56, 75;
    --green: #32678A;
    --green-soft: #E6EDF1;
    --theme-selected: var(--manager-theme-selected);
    --theme-primary: var(--manager-accent);
    --theme-light: var(--manager-accent-light);
    --theme-dark: var(--manager-accent-dark);
    --theme-deep: var(--manager-accent-deep);
    --theme-soft: var(--manager-accent-soft);
    --theme-muted: var(--manager-mint);
    --theme-rgb: var(--manager-accent-rgb);
    --theme-deep-rgb: var(--manager-deep-rgb);
    --forest-2: var(--manager-accent-light);
    --forest-3: var(--manager-accent-deep);
    --surface-tint: color-mix(in srgb, var(--manager-accent-soft) 48%, white);
    --line: rgba(var(--manager-accent-rgb), .12);
    --line-strong: rgba(var(--manager-accent-rgb), .2);
    --shadow: 0 22px 55px rgba(var(--manager-deep-rgb), .1);
    --shadow-soft: 0 10px 28px rgba(var(--manager-deep-rgb), .07);
    --shadow-lift: 0 24px 60px rgba(var(--manager-deep-rgb), .15);
}
.customer-body, .auth-body-customer, .theme-option-customer {
    --customer-theme-selected: #A64B32;
    --customer-forest: #A64B32;
    --customer-forest-light: #B46853;
    --customer-forest-dark: #7D3826;
    --customer-forest-deep: #5A291B;
    --customer-sage: #F4E9E6;
    --customer-theme-muted: #DDBBB1;
    --customer-theme-rgb: 166, 75, 50;
    --customer-deep-rgb: 90, 41, 27;
    --green: #A64B32;
    --green-soft: #F4E9E6;
    --theme-selected: var(--customer-theme-selected);
    --theme-primary: var(--customer-forest);
    --theme-light: var(--customer-forest-light);
    --theme-dark: var(--customer-forest-dark);
    --theme-deep: var(--customer-forest-deep);
    --theme-soft: var(--customer-sage);
    --theme-muted: var(--customer-theme-muted);
    --theme-rgb: var(--customer-theme-rgb);
    --theme-deep-rgb: var(--customer-deep-rgb);
    --forest-2: var(--customer-forest-light);
    --forest-3: var(--customer-forest-deep);
    --surface-tint: color-mix(in srgb, var(--customer-sage) 48%, white);
    --line: rgba(var(--customer-theme-rgb), .12);
    --line-strong: rgba(var(--customer-theme-rgb), .2);
    --shadow: 0 22px 55px rgba(var(--customer-deep-rgb), .1);
    --shadow-soft: 0 10px 28px rgba(var(--customer-deep-rgb), .07);
    --shadow-lift: 0 24px 60px rgba(var(--customer-deep-rgb), .15);
}
/*
 * Window scrollbar. It belongs to <html>, which sits outside the
 * two body scopes above, so it can never read --theme-rgb and was
 * falling back to the default green whatever colour was picked.
 * The resolved values are written literally here instead.
 */
html:has(.manager-body), html:has(.auth-body-manager) {
    scrollbar-color: rgba(50, 103, 138, .45) transparent;
}
html:has(.manager-body)::-webkit-scrollbar-thumb,
html:has(.auth-body-manager)::-webkit-scrollbar-thumb {
    background: rgba(50, 103, 138, .45);
}
html:has(.manager-body)::-webkit-scrollbar-thumb:hover,
html:has(.auth-body-manager)::-webkit-scrollbar-thumb:hover {
    background: rgba(50, 103, 138, .7);
}
html:has(.customer-body), html:has(.auth-body-customer) {
    scrollbar-color: rgba(166, 75, 50, .45) transparent;
}
html:has(.customer-body)::-webkit-scrollbar-thumb,
html:has(.auth-body-customer)::-webkit-scrollbar-thumb {
    background: rgba(166, 75, 50, .45);
}
html:has(.customer-body)::-webkit-scrollbar-thumb:hover,
html:has(.auth-body-customer)::-webkit-scrollbar-thumb:hover {
    background: rgba(166, 75, 50, .7);
}