feat: unify site theming via CSS custom properties (GH #91)

Replace all hardcoded brand color hex values with CSS custom properties
so BrandingContext drives both the customer portal and staff site.

- index.css: add derived accent/primary vars using color-mix()
  (--color-accent-hover, --color-accent-dark, --color-accent-light,
  --color-accent-lighter, --color-primary-dark); fix focus ring styles
  to use var(--color-primary) instead of hardcoded hex
- BrandingContext.tsx: also update <meta name="theme-color"> in sync
  with primaryColor so PWA theme-color tracks branding at runtime
- portal/sections: replace bg-[#8b7355], text-[#6b5a42], bg-[#f0ebe4],
  bg-[#faf5ef], hover:bg-[#7a6549] etc. with Tailwind v4 CSS var
  utilities (bg-(--color-accent), text-(--color-accent-dark), etc.)
- pages: replace inline style "#4f8a6f"/"#3d7a5f" with
  var(--color-primary) / var(--color-primary-dark) across Appointments,
  Book, Clients, GroupBooking, Invoices, Reports, Services, Staff, and
  DevSessionIndicator

Closes #91

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/src/index.css

@@ -2,7 +2,12 @@
 
 :root {
   --color-primary: #4f8a6f;
+  --color-primary-dark: color-mix(in srgb, var(--color-primary) 80%, #000);
   --color-accent: #8b7355;
+  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, #000);
+  --color-accent-dark: color-mix(in srgb, var(--color-accent) 78%, #000);
+  --color-accent-light: color-mix(in srgb, var(--color-accent) 18%, #fff);
+  --color-accent-lighter: color-mix(in srgb, var(--color-accent) 9%, #fff);
 }
 
 *, *::before, *::after {
@@ -51,8 +56,8 @@ button:active:not(:disabled) {
 /* ─── Admin input / select focus states ─── */
 input:focus, select:focus, textarea:focus {
   outline: none;
-  border-color: #4f8a6f;
-  box-shadow: 0 0 0 3px rgba(79, 138, 111, 0.12);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
 }
 
 /* ─── Admin card-like containers (borders get subtle shadow) ─── */