/* themes.css — PerfectBarber shop theme library (ADR-0014 template tiers, ADR-0015 doors). * * The SHOP-branded doors (booking /, /@) wear the shop's chosen theme; the PLATFORM * surfaces (matchmaker /find, claim wizard) wear one fixed PerfectBarber identity and do NOT load * this file. Themes are applied by setting `data-theme` (+ `data-mode`) on ; every consumer * page CSS reads the canonical --pb-* vars below, so a palette swap needs zero per-component work. * * TIERS: * free — 5 tasteful, broadly-flattering barbershop palettes (self-serve). * premium — 3 richer, more distinctive palettes (paid). * custom — bespoke, one shop only, NOT selectable by others (e.g. Barber Benson's neon). * * Canonical vars each theme sets: * --pb-bg / --pb-surface / --pb-surface-2 canvas + card + elevated card * --pb-edge hairline borders * --pb-text / --pb-dim body text + muted (both AA on --pb-bg/--pb-surface) * --pb-accent / --pb-accent-ink brand accent + text that sits ON the accent * --pb-accent-rgb accent as "r,g,b" so glows keep their own alpha * --pb-haze 0–1 alpha of the accent haze (dark themes glow, light ~0) * --pb-shadow card drop shadow * --pb-mode 'light' | 'dark' (info hook for JS/theme-color) */ /* Default (no data-theme) = Classic Chair — a safe premium dark. */ :root, :root[data-theme="classic-chair"] { --pb-bg:#151312; --pb-surface:#1E1B19; --pb-surface-2:#262220; --pb-edge:#322E29; --pb-text:#F4F0E9; --pb-dim:#A39C90; --pb-accent:#C6A15B; --pb-accent-ink:#171205; --pb-accent-rgb:198,161,91; --pb-haze:.14; --pb-shadow:0 10px 30px -16px rgba(0,0,0,.8); --pb-mode:dark; } /* ── FREE ─────────────────────────────────────────────────────────────────── */ /* 1. Fresh Fade — light, clean, modern. Deep teal-green reads fresh + unisex. The safe default. */ :root[data-theme="fresh-fade"] { --pb-bg:#FBFAF7; --pb-surface:#FFFFFF; --pb-surface-2:#F4F2EC; --pb-edge:#E7E3DA; --pb-text:#1A1917; --pb-dim:#6B675E; --pb-accent:#1E6F5C; --pb-accent-ink:#FFFFFF; --pb-accent-rgb:30,111,92; --pb-haze:.05; --pb-shadow:0 12px 30px -18px rgba(26,25,23,.28); --pb-mode:light; } /* 2. Classic Chair — dark, warm brass. The timeless barbershop (default, defined above). */ /* 3. Barber Pole — light heritage: bone canvas, navy ink, barber-pole red. Traditional. */ :root[data-theme="barber-pole"] { --pb-bg:#F7F3EA; --pb-surface:#FFFFFF; --pb-surface-2:#F1EBDD; --pb-edge:#E4DDCC; --pb-text:#15223A; --pb-dim:#66707F; --pb-accent:#B3122B; --pb-accent-ink:#FFFFFF; --pb-accent-rgb:179,18,43; --pb-haze:.05; --pb-shadow:0 12px 30px -18px rgba(21,34,58,.26); --pb-mode:light; } /* 4. Sage & Bone — light, warm, contemporary, unisex (great for shops that also do women's). */ :root[data-theme="sage-bone"] { --pb-bg:#F3F1EA; --pb-surface:#FBFAF5; --pb-surface-2:#EAE7DB; --pb-edge:#E0D9C9; --pb-text:#22201B; --pb-dim:#6F695D; --pb-accent:#3E5A4B; --pb-accent-ink:#FFFFFF; --pb-accent-rgb:62,90,75; --pb-haze:.05; --pb-shadow:0 12px 30px -18px rgba(34,32,27,.24); --pb-mode:light; } /* 5. Midnight Steel — dark, cool, modern-masculine. Steel blue on deep slate. */ :root[data-theme="midnight-steel"] { --pb-bg:#0F1620; --pb-surface:#16212E; --pb-surface-2:#1D2A38; --pb-edge:#263444; --pb-text:#EAF0F6; --pb-dim:#8B99A6; --pb-accent:#4FA6CC; --pb-accent-ink:#06131B; --pb-accent-rgb:79,166,204; --pb-haze:.16; --pb-shadow:0 10px 30px -16px rgba(0,0,0,.75); --pb-mode:dark; } /* ── PREMIUM ──────────────────────────────────────────────────────────────── */ /* 6. Oxblood & Brass — deep oxblood canvas, brass accent. Bar+lounge luxe. */ :root[data-theme="oxblood-brass"] { --pb-bg:#180F0E; --pb-surface:#231615; --pb-surface-2:#2C1B19; --pb-edge:#3A2724; --pb-text:#F3EAE4; --pb-dim:#A8938A; --pb-accent:#B5893F; --pb-accent-ink:#1A1205; --pb-accent-rgb:181,137,63; --pb-haze:.13; --pb-shadow:0 10px 30px -16px rgba(0,0,0,.8); --pb-mode:dark; } /* 7. Emerald Club — deep emerald + brass. Upscale, members-only feel. */ :root[data-theme="emerald-club"] { --pb-bg:#0E1B15; --pb-surface:#16241D; --pb-surface-2:#1D2E25; --pb-edge:#2A3D33; --pb-text:#EAF2EC; --pb-dim:#8FA398; --pb-accent:#C9A24B; --pb-accent-ink:#0E1B15; --pb-accent-rgb:201,162,75; --pb-haze:.13; --pb-shadow:0 10px 30px -16px rgba(0,0,0,.8); --pb-mode:dark; } /* 8. Copper Noir — charcoal + copper. Moody, industrial-premium. */ :root[data-theme="copper-noir"] { --pb-bg:#121110; --pb-surface:#1B1918; --pb-surface-2:#232120; --pb-edge:#2E2A27; --pb-text:#F1ECE6; --pb-dim:#9C948B; --pb-accent:#C6764A; --pb-accent-ink:#1A0F08; --pb-accent-rgb:198,118,74; --pb-haze:.13; --pb-shadow:0 10px 30px -16px rgba(0,0,0,.8); --pb-mode:dark; } /* ── CUSTOM (reserved — one shop only, not offered in the picker) ──────────── */ /* 9. Neon — Barber Benson's bespoke black & neon-gold. RESERVED: never selectable by other shops. */ :root[data-theme="neon-benson"] { --pb-bg:#0A0A0C; --pb-surface:#101014; --pb-surface-2:#16161B; --pb-edge:#26262C; --pb-text:#F5F2E8; --pb-dim:#9C9A93; --pb-accent:#FFD166; --pb-accent-ink:#141005; --pb-accent-rgb:255,209,102; --pb-haze:.15; --pb-shadow:0 10px 30px -16px rgba(0,0,0,.85); --pb-mode:dark; }