refactor(frontend): consolidate shared styles into centralized style system

- Create comprehensive shared.ts with design tokens and categorized styles:
  - layoutStyles: main, loader, content variants
  - cardStyles: card, tableCard, cardHeader
  - tableStyles: complete table styling
  - paginationStyles: pagination controls
  - formStyles: inputs, labels, errors
  - buttonStyles: primary, secondary, accent, danger variants
  - badgeStyles: status badges with color variants
  - bannerStyles: error/success banners
  - modalStyles: modal overlay and content
  - toastStyles: toast notifications
  - utilityStyles: divider, emptyState, etc.

- Refactor all page components to use shared styles:
  - page.tsx (counter)
  - audit/page.tsx
  - booking/page.tsx
  - appointments/page.tsx
  - profile/page.tsx
  - invites/page.tsx
  - admin/invites/page.tsx
  - admin/availability/page.tsx

- Reduce code duplication significantly (each page now has only
  truly page-specific styles)
- Maintain backwards compatibility with sharedStyles export

frontend/app/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { Permission } from "./auth-context";
 import { api } from "./api";
-import { sharedStyles } from "./styles/shared";
+import { layoutStyles, cardStyles, buttonStyles } from "./styles/shared";
 import { Header } from "./components/Header";
 import { useRequireAuth } from "./hooks/useRequireAuth";
 
@@ -29,8 +29,8 @@ export default function Home() {
 
   if (isLoading) {
     return (
-      <main style={styles.main}>
-        <div style={styles.loader}>Loading...</div>
+      <main style={layoutStyles.main}>
+        <div style={layoutStyles.loader}>Loading...</div>
       </main>
     );
   }
@@ -40,10 +40,10 @@ export default function Home() {
   }
 
   return (
-    <main style={styles.main}>
+    <main style={layoutStyles.main}>
       <Header currentPage="counter" />
 
-      <div style={styles.content}>
+      <div style={layoutStyles.contentCentered}>
         <div style={styles.counterCard}>
           <span style={styles.counterLabel}>Current Count</span>
           <h1 style={styles.counter}>{count === null ? "..." : count}</h1>
@@ -57,15 +57,13 @@ export default function Home() {
   );
 }
 
-const pageStyles: Record<string, React.CSSProperties> = {
+// Page-specific styles only - truly unique to this page
+const styles: Record<string, React.CSSProperties> = {
   counterCard: {
-    background: "rgba(255, 255, 255, 0.03)",
-    backdropFilter: "blur(10px)",
-    border: "1px solid rgba(255, 255, 255, 0.08)",
+    ...cardStyles.card,
     borderRadius: "32px",
     padding: "4rem 5rem",
     textAlign: "center",
-    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
   },
   counterLabel: {
     fontFamily: "'DM Sans', system-ui, sans-serif",
@@ -89,26 +87,17 @@ const pageStyles: Record<string, React.CSSProperties> = {
     backgroundClip: "text",
   },
   incrementBtn: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
+    ...buttonStyles.primaryButton,
     marginTop: "2.5rem",
     padding: "1rem 2.5rem",
     fontSize: "1.125rem",
-    fontWeight: 600,
-    background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
-    color: "#fff",
-    border: "none",
     borderRadius: "16px",
-    cursor: "pointer",
     display: "inline-flex",
     alignItems: "center",
     gap: "0.5rem",
-    transition: "transform 0.2s, box-shadow 0.2s",
-    boxShadow: "0 4px 14px rgba(99, 102, 241, 0.4)",
   },
   plusIcon: {
     fontSize: "1.5rem",
     fontWeight: 400,
   },
 };
-
-const styles = { ...sharedStyles, ...pageStyles };