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/invites/page.tsx

@@ -2,11 +2,17 @@
 
 import { useEffect, useState, useCallback } from "react";
 import { api } from "../api";
-import { sharedStyles } from "../styles/shared";
 import { Header } from "../components/Header";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { components } from "../generated/api";
 import constants from "../../../shared/constants.json";
+import {
+  layoutStyles,
+  cardStyles,
+  typographyStyles,
+  badgeStyles,
+  buttonStyles,
+} from "../styles/shared";
 
 // Use generated type from OpenAPI schema
 type Invite = components["schemas"]["UserInviteResponse"];
@@ -57,8 +63,8 @@ export default function InvitesPage() {
 
   if (isLoading || isLoadingInvites) {
     return (
-      <main style={styles.main}>
-        <div style={styles.loader}>Loading...</div>
+      <main style={layoutStyles.main}>
+        <div style={layoutStyles.loader}>Loading...</div>
       </main>
     );
   }
@@ -73,14 +79,16 @@ export default function InvitesPage() {
   const revokedInvites = invites.filter((i) => i.status === REVOKED);
 
   return (
-    <main style={styles.main}>
+    <main style={layoutStyles.main}>
       <Header currentPage="invites" />
 
-      <div style={styles.content}>
+      <div style={layoutStyles.contentCentered}>
         <div style={styles.pageCard}>
-          <div style={styles.cardHeader}>
-            <h1 style={styles.cardTitle}>My Invites</h1>
-            <p style={styles.cardSubtitle}>Share your invite codes with friends to let them join</p>
+          <div style={cardStyles.cardHeader}>
+            <h1 style={cardStyles.cardTitle}>My Invites</h1>
+            <p style={cardStyles.cardSubtitle}>
+              Share your invite codes with friends to let them join
+            </p>
           </div>
 
           {invites.length === 0 ? (
@@ -93,14 +101,19 @@ export default function InvitesPage() {
               {/* Ready Invites */}
               {readyInvites.length > 0 && (
                 <div style={styles.section}>
-                  <h2 style={styles.sectionTitle}>Available ({readyInvites.length})</h2>
-                  <p style={styles.sectionHint}>Share these links with people you want to invite</p>
+                  <h2 style={typographyStyles.sectionTitle}>Available ({readyInvites.length})</h2>
+                  <p style={typographyStyles.sectionHint}>
+                    Share these links with people you want to invite
+                  </p>
                   <div style={styles.inviteList}>
                     {readyInvites.map((invite) => (
                       <div key={invite.id} style={styles.inviteCard}>
                         <div style={styles.inviteCode}>{invite.identifier}</div>
                         <div style={styles.inviteActions}>
-                          <button onClick={() => copyToClipboard(invite)} style={styles.copyButton}>
+                          <button
+                            onClick={() => copyToClipboard(invite)}
+                            style={buttonStyles.accentButton}
+                          >
                             {copiedId === invite.id ? "Copied!" : "Copy Link"}
                           </button>
                         </div>
@@ -113,13 +126,15 @@ export default function InvitesPage() {
               {/* Spent Invites */}
               {spentInvites.length > 0 && (
                 <div style={styles.section}>
-                  <h2 style={styles.sectionTitle}>Used ({spentInvites.length})</h2>
+                  <h2 style={typographyStyles.sectionTitle}>Used ({spentInvites.length})</h2>
                   <div style={styles.inviteList}>
                     {spentInvites.map((invite) => (
                       <div key={invite.id} style={styles.inviteCardSpent}>
                         <div style={styles.inviteCode}>{invite.identifier}</div>
                         <div style={styles.inviteeMeta}>
-                          <span style={styles.statusBadgeSpent}>Used</span>
+                          <span style={{ ...badgeStyles.badge, ...badgeStyles.badgeSuccess }}>
+                            Used
+                          </span>
                           <span style={styles.inviteeEmail}>by {invite.used_by_email}</span>
                         </div>
                       </div>
@@ -131,12 +146,14 @@ export default function InvitesPage() {
               {/* Revoked Invites */}
               {revokedInvites.length > 0 && (
                 <div style={styles.section}>
-                  <h2 style={styles.sectionTitle}>Revoked ({revokedInvites.length})</h2>
+                  <h2 style={typographyStyles.sectionTitle}>Revoked ({revokedInvites.length})</h2>
                   <div style={styles.inviteList}>
                     {revokedInvites.map((invite) => (
                       <div key={invite.id} style={styles.inviteCardRevoked}>
                         <div style={styles.inviteCode}>{invite.identifier}</div>
-                        <span style={styles.statusBadgeRevoked}>Revoked</span>
+                        <span style={{ ...badgeStyles.badge, ...badgeStyles.badgeError }}>
+                          Revoked
+                        </span>
                       </div>
                     ))}
                   </div>
@@ -150,33 +167,12 @@ export default function InvitesPage() {
   );
 }
 
-const pageStyles: Record<string, React.CSSProperties> = {
+// Page-specific styles
+const styles: Record<string, React.CSSProperties> = {
   pageCard: {
-    background: "rgba(255, 255, 255, 0.03)",
-    backdropFilter: "blur(10px)",
-    border: "1px solid rgba(255, 255, 255, 0.08)",
-    borderRadius: "24px",
-    padding: "2.5rem",
+    ...cardStyles.card,
     width: "100%",
     maxWidth: "600px",
-    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
-  },
-  cardHeader: {
-    marginBottom: "2rem",
-  },
-  cardTitle: {
-    fontFamily: "'Instrument Serif', Georgia, serif",
-    fontSize: "2rem",
-    fontWeight: 400,
-    color: "#fff",
-    margin: 0,
-    letterSpacing: "-0.02em",
-  },
-  cardSubtitle: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    color: "rgba(255, 255, 255, 0.5)",
-    marginTop: "0.5rem",
-    fontSize: "0.95rem",
   },
   emptyState: {
     textAlign: "center",
@@ -204,21 +200,6 @@ const pageStyles: Record<string, React.CSSProperties> = {
     flexDirection: "column",
     gap: "0.75rem",
   },
-  sectionTitle: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    fontSize: "0.875rem",
-    fontWeight: 600,
-    color: "rgba(255, 255, 255, 0.8)",
-    margin: 0,
-    textTransform: "uppercase",
-    letterSpacing: "0.05em",
-  },
-  sectionHint: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    fontSize: "0.8rem",
-    color: "rgba(255, 255, 255, 0.4)",
-    margin: 0,
-  },
   inviteList: {
     display: "flex",
     flexDirection: "column",
@@ -262,48 +243,14 @@ const pageStyles: Record<string, React.CSSProperties> = {
     display: "flex",
     gap: "0.5rem",
   },
-  copyButton: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    fontSize: "0.8rem",
-    fontWeight: 500,
-    padding: "0.5rem 1rem",
-    background: "rgba(99, 102, 241, 0.3)",
-    color: "#fff",
-    border: "1px solid rgba(99, 102, 241, 0.5)",
-    borderRadius: "8px",
-    cursor: "pointer",
-    transition: "all 0.2s",
-  },
   inviteeMeta: {
     display: "flex",
     alignItems: "center",
     gap: "0.5rem",
   },
-  statusBadgeSpent: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    fontSize: "0.7rem",
-    fontWeight: 500,
-    padding: "0.25rem 0.5rem",
-    background: "rgba(34, 197, 94, 0.2)",
-    color: "rgba(34, 197, 94, 0.9)",
-    borderRadius: "4px",
-    textTransform: "uppercase",
-  },
-  statusBadgeRevoked: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    fontSize: "0.7rem",
-    fontWeight: 500,
-    padding: "0.25rem 0.5rem",
-    background: "rgba(239, 68, 68, 0.2)",
-    color: "rgba(239, 68, 68, 0.9)",
-    borderRadius: "4px",
-    textTransform: "uppercase",
-  },
   inviteeEmail: {
     fontFamily: "'DM Sans', system-ui, sans-serif",
     fontSize: "0.8rem",
     color: "rgba(255, 255, 255, 0.6)",
   },
 };
-
-const styles = { ...sharedStyles, ...pageStyles };