@jmruthers/pace-core 0.5.121 → 0.5.123

package/examples/public-pages/CorrectPublicPageImplementation.tsx

@@ -106,23 +106,23 @@ function PublicRecipeGridReportPage() {
   // Step 4: Handle error state
   if (error) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
           <div className="mb-6">
-            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
-              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
+              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
               Recipe Grid Report Not Found
             </h1>
-            <p className="text-gray-600 mb-6">
+            <p className="text-sec-600 mb-6">
               The event code "{eventCode}" is invalid or the recipe grid report is not available for public viewing.
             </p>
             <button
               onClick={refetch}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
             >
               Try Again
             </button>
@@ -135,17 +135,17 @@ function PublicRecipeGridReportPage() {
   // Step 5: Handle missing event
   if (!event) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
             Recipe Grid Report Not Available
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-sec-600 mb-6">
             This recipe grid report is not available for public viewing.
           </p>
           <button
             onClick={refetch}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
           >
             Try Again
           </button>
@@ -167,13 +167,13 @@ function PublicRecipeGridReportPage() {
       <main className="max-w-6xl mx-auto px-4 py-8">
         {/* Recipe Grid Report Content */}
         <div className="mb-12">
-          <div className="bg-green-50 border border-green-200 rounded-lg p-6">
-            <h3 className="font-semibold text-green-900 mb-2">Recipe Grid Report</h3>
-            <p className="text-green-800">
+          <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+            <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
+            <p className="text-main-800">
               This is where your recipe grid report content would go. 
               The public page is now working correctly without authentication context conflicts.
             </p>
-            <div className="mt-4 text-sm text-green-700">
+            <div className="mt-4 text-sm text-main-700">
               <p><strong>Event Code:</strong> {eventCode}</p>
               <p><strong>Event ID:</strong> {event.event_id}</p>
               <p><strong>Event Name:</strong> {event.event_name}</p>
@@ -185,12 +185,12 @@ function PublicRecipeGridReportPage() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
           <div className="lg:col-span-2 space-y-6">
             <div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-4">Event Information</h2>
-              <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+              <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+              <div className="bg-sec-50 rounded-lg p-6 space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <h3 className="font-semibold text-gray-700">Date</h3>
-                    <p className="text-gray-900">
+                    <h3 className="font-semibold text-sec-700">Date</h3>
+                    <p className="text-sec-900">
                       {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
                         weekday: 'long',
                         year: 'numeric',
@@ -200,16 +200,16 @@ function PublicRecipeGridReportPage() {
                     </p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Venue</h3>
-                    <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+                    <h3 className="font-semibold text-sec-700">Venue</h3>
+                    <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Participants</h3>
-                    <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+                    <h3 className="font-semibold text-sec-700">Participants</h3>
+                    <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Event Code</h3>
-                    <p className="text-gray-900 font-mono">{event.event_code}</p>
+                    <h3 className="font-semibold text-sec-700">Event Code</h3>
+                    <p className="text-sec-900 font-mono">{event.event_code}</p>
                   </div>
                 </div>
               </div>
@@ -226,7 +226,7 @@ function PublicRecipeGridReportPage() {
                 size="2xl"
                 className="rounded-lg shadow-lg"
               />
-              <p className="mt-4 text-sm text-gray-600">Event Logo</p>
+              <p className="mt-4 text-sm text-sec-600">Event Logo</p>
             </div>
           </div>
         </div>
@@ -266,9 +266,9 @@ function PublicEventPage() {
             size="xl"
             className="mx-auto mb-4"
           />
-          <h1 className="text-2xl font-bold text-gray-900">{event.event_name}</h1>
+          <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
           {event.event_date && (
-            <p className="text-gray-600 mt-2">
+            <p className="text-sec-600 mt-2">
               {new Date(event.event_date).toLocaleDateString('en-AU')}
             </p>
           )}
@@ -285,12 +285,12 @@ function PublicEventPage() {
  */
 function PublicInfoPage() {
   return (
-    <div className="min-h-screen bg-white flex items-center justify-center">
+    <div className="min-h-screen bg-main-50 flex items-center justify-center">
       <div className="max-w-md mx-auto text-center px-4">
-        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+        <h1 className="text-2xl font-bold text-sec-900 mb-4">
           Public Information Page
         </h1>
-        <p className="text-gray-600">
+        <p className="text-sec-600">
           This is a public information page that doesn't require authentication.
         </p>
       </div>

package/examples/public-pages/PublicEventPage.tsx

@@ -65,23 +65,23 @@ export function PublicEventPage() {
   // Handle error state
   if (eventError) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
           <div className="mb-6">
-            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
-              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
+              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
               Event Not Found
             </h1>
-            <p className="text-gray-600 mb-6">
+            <p className="text-sec-600 mb-6">
               The event code "{eventCode}" is invalid or the event is not available for public viewing.
             </p>
             <button
               onClick={refetchEvent}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
             >
               Try Again
             </button>
@@ -94,17 +94,17 @@ export function PublicEventPage() {
   // Handle missing event
   if (!event) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
             Event Not Available
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-sec-600 mb-6">
             This event is not available for public viewing.
           </p>
           <button
             onClick={refetchEvent}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
           >
             Try Again
           </button>
@@ -129,12 +129,12 @@ export function PublicEventPage() {
             {/* Event Information */}
             <div className="lg:col-span-2 space-y-6">
               <div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-4">Event Information</h2>
-                <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+                <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+                <div className="bg-sec-50 rounded-lg p-6 space-y-4">
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                      <h3 className="font-semibold text-gray-700">Date</h3>
-                      <p className="text-gray-900">
+                      <h3 className="font-semibold text-sec-700">Date</h3>
+                      <p className="text-sec-900">
                         {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
                           weekday: 'long',
                           year: 'numeric',
@@ -144,23 +144,23 @@ export function PublicEventPage() {
                       </p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Venue</h3>
-                      <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+                      <h3 className="font-semibold text-sec-700">Venue</h3>
+                      <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Participants</h3>
-                      <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+                      <h3 className="font-semibold text-sec-700">Participants</h3>
+                      <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Event Code</h3>
-                      <p className="text-gray-900 font-mono">{event.event_code}</p>
+                      <h3 className="font-semibold text-sec-700">Event Code</h3>
+                      <p className="text-sec-900 font-mono">{event.event_code}</p>
                     </div>
                   </div>
                   
                   {event.event_news && (
                     <div>
-                      <h3 className="font-semibold text-gray-700 mb-2">Event News</h3>
-                      <p className="text-gray-900">{event.event_news}</p>
+                      <h3 className="font-semibold text-sec-700 mb-2">Event News</h3>
+                      <p className="text-sec-900">{event.event_news}</p>
                     </div>
                   )}
                 </div>
@@ -177,18 +177,18 @@ export function PublicEventPage() {
                   size="2xl"
                   className="rounded-lg shadow-lg"
                 />
-                <p className="mt-4 text-sm text-gray-600">Event Logo</p>
+                <p className="mt-4 text-sm text-sec-600">Event Logo</p>
               </div>
             </div>
           </div>
 
           {/* Note about dishes */}
           <div className="mb-12">
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
-              <h3 className="font-semibold text-blue-900 mb-2">Event Dishes</h3>
-              <p className="text-blue-800">
+            <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+              <h3 className="font-semibold text-main-900 mb-2">Event Dishes</h3>
+              <p className="text-main-800">
                 For CAKE applications, implement your own dishes functionality using the 
-                <code className="bg-blue-100 px-1 rounded">usePublicDishes</code> hook 
+                <code className="bg-main-100 px-1 rounded">usePublicDishes</code> hook 
                 as described in the CAKE implementation guide.
               </p>
             </div>
@@ -196,9 +196,9 @@ export function PublicEventPage() {
 
           {/* Event Footer Information */}
           {event.event_footer && (
-            <div className="bg-gray-50 rounded-lg p-6">
-              <h3 className="font-semibold text-gray-900 mb-2">Additional Information</h3>
-              <p className="text-gray-700">{event.event_footer}</p>
+            <div className="bg-sec-50 rounded-lg p-6">
+              <h3 className="font-semibold text-sec-900 mb-2">Additional Information</h3>
+              <p className="text-sec-700">{event.event_footer}</p>
             </div>
           )}
         </main>
@@ -238,29 +238,29 @@ export function PublicEventPageCompact() {
               size="xl"
               className="mx-auto mb-4"
             />
-            <h1 className="text-2xl font-bold text-gray-900">{event.event_name}</h1>
+            <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
             {event.event_date && (
-              <p className="text-gray-600 mt-2">
+              <p className="text-sec-600 mt-2">
                 {new Date(event.event_date).toLocaleDateString('en-AU')}
               </p>
             )}
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-            <div className="bg-gray-50 rounded p-4">
-              <h3 className="font-semibold text-gray-700">Venue</h3>
-              <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+            <div className="bg-sec-50 rounded p-4">
+              <h3 className="font-semibold text-sec-700">Venue</h3>
+              <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
             </div>
-            <div className="bg-gray-50 rounded p-4">
-              <h3 className="font-semibold text-gray-700">Participants</h3>
-              <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+            <div className="bg-sec-50 rounded p-4">
+              <h3 className="font-semibold text-sec-700">Participants</h3>
+              <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
             </div>
           </div>
 
           {event.event_news && (
-            <div className="bg-blue-50 border border-blue-200 rounded p-4">
-              <h3 className="font-semibold text-blue-900 mb-2">Event News</h3>
-              <p className="text-blue-800">{event.event_news}</p>
+            <div className="bg-main-50 border border-main-200 rounded p-4">
+              <h3 className="font-semibold text-main-900 mb-2">Event News</h3>
+              <p className="text-main-800">{event.event_news}</p>
             </div>
           )}
         </main>

package/examples/public-pages/PublicPageApp.tsx

@@ -96,23 +96,23 @@ function PublicRecipeGridReportPage() {
   // Step 4: Handle error state
   if (error) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
           <div className="mb-6">
-            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
-              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
+              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
               Recipe Grid Report Not Found
             </h1>
-            <p className="text-gray-600 mb-6">
+            <p className="text-sec-600 mb-6">
               The event code "{eventCode}" is invalid or the recipe grid report is not available for public viewing.
             </p>
             <button
               onClick={refetch}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
             >
               Try Again
             </button>
@@ -125,17 +125,17 @@ function PublicRecipeGridReportPage() {
   // Step 5: Handle missing event
   if (!event) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
             Recipe Grid Report Not Available
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-sec-600 mb-6">
             This recipe grid report is not available for public viewing.
           </p>
           <button
             onClick={refetch}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
           >
             Try Again
           </button>
@@ -157,13 +157,13 @@ function PublicRecipeGridReportPage() {
       <main className="max-w-6xl mx-auto px-4 py-8">
         {/* Recipe Grid Report Content */}
         <div className="mb-12">
-          <div className="bg-green-50 border border-green-200 rounded-lg p-6">
-            <h3 className="font-semibold text-green-900 mb-2">Recipe Grid Report</h3>
-            <p className="text-green-800">
+          <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+            <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
+            <p className="text-main-800">
               This is where your recipe grid report content would go. 
               The public page is now working correctly without authentication context conflicts.
             </p>
-            <div className="mt-4 text-sm text-green-700">
+            <div className="mt-4 text-sm text-main-700">
               <p><strong>Event Code:</strong> {eventCode}</p>
               <p><strong>Event ID:</strong> {event.event_id}</p>
               <p><strong>Event Name:</strong> {event.event_name}</p>
@@ -175,12 +175,12 @@ function PublicRecipeGridReportPage() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
           <div className="lg:col-span-2 space-y-6">
             <div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-4">Event Information</h2>
-              <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+              <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+              <div className="bg-sec-50 rounded-lg p-6 space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <h3 className="font-semibold text-gray-700">Date</h3>
-                    <p className="text-gray-900">
+                    <h3 className="font-semibold text-sec-700">Date</h3>
+                    <p className="text-sec-900">
                       {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
                         weekday: 'long',
                         year: 'numeric',
@@ -190,16 +190,16 @@ function PublicRecipeGridReportPage() {
                     </p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Venue</h3>
-                    <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+                    <h3 className="font-semibold text-sec-700">Venue</h3>
+                    <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Participants</h3>
-                    <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+                    <h3 className="font-semibold text-sec-700">Participants</h3>
+                    <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
                   </div>
                   <div>
-                    <h3 className="font-semibold text-gray-700">Event Code</h3>
-                    <p className="text-gray-900 font-mono">{event.event_code}</p>
+                    <h3 className="font-semibold text-sec-700">Event Code</h3>
+                    <p className="text-sec-900 font-mono">{event.event_code}</p>
                   </div>
                 </div>
               </div>
@@ -216,7 +216,7 @@ function PublicRecipeGridReportPage() {
                 size="2xl"
                 className="rounded-lg shadow-lg"
               />
-              <p className="mt-4 text-sm text-gray-600">Event Logo</p>
+              <p className="mt-4 text-sm text-sec-600">Event Logo</p>
             </div>
           </div>
         </div>
@@ -255,9 +255,9 @@ function PublicEventPage() {
             size="xl"
             className="mx-auto mb-4"
           />
-          <h1 className="text-2xl font-bold text-gray-900">{event.event_name}</h1>
+          <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
           {event.event_date && (
-            <p className="text-gray-600 mt-2">
+            <p className="text-sec-600 mt-2">
               {new Date(event.event_date).toLocaleDateString('en-AU')}
             </p>
           )}
@@ -274,12 +274,12 @@ function PublicEventPage() {
  */
 function PublicInfoPage() {
   return (
-    <div className="min-h-screen bg-white flex items-center justify-center">
+    <div className="min-h-screen bg-main-50 flex items-center justify-center">
       <div className="max-w-md mx-auto text-center px-4">
-        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+        <h1 className="text-2xl font-bold text-sec-900 mb-4">
           Public Information Page
         </h1>
-        <p className="text-gray-600">
+        <p className="text-sec-600">
           This is a public information page that doesn't require authentication.
         </p>
       </div>
@@ -292,12 +292,12 @@ function PublicInfoPage() {
  */
 function PublicReportPage() {
   return (
-    <div className="min-h-screen bg-white flex items-center justify-center">
+    <div className="min-h-screen bg-main-50 flex items-center justify-center">
       <div className="max-w-md mx-auto text-center px-4">
-        <h1 className="text-2xl font-bold text-gray-900 mb-4">
+        <h1 className="text-2xl font-bold text-sec-900 mb-4">
           Public Report Page
         </h1>
-        <p className="text-gray-600">
+        <p className="text-sec-600">
           This is a public report page that doesn't require authentication.
         </p>
       </div>

package/examples/public-pages/PublicPageUsageExample.tsx

@@ -64,23 +64,23 @@ export function PublicPageUsageExample() {
   // Step 4: Handle error state
   if (error) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
           <div className="mb-6">
-            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
-              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
+              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
               Event Not Found
             </h1>
-            <p className="text-gray-600 mb-6">
+            <p className="text-sec-600 mb-6">
               The event code "{eventCode}" is invalid or the event is not available for public viewing.
             </p>
             <button
               onClick={refetch}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
             >
               Try Again
             </button>
@@ -93,17 +93,17 @@ export function PublicPageUsageExample() {
   // Step 5: Handle missing event
   if (!event) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
         <div className="max-w-md mx-auto text-center px-4">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
             Event Not Available
           </h1>
-          <p className="text-gray-600 mb-6">
+          <p className="text-sec-600 mb-6">
             This event is not available for public viewing.
           </p>
           <button
             onClick={refetch}
-            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
           >
             Try Again
           </button>
@@ -129,12 +129,12 @@ export function PublicPageUsageExample() {
             {/* Event Information */}
             <div className="lg:col-span-2 space-y-6">
               <div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-4">Event Information</h2>
-                <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+                <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+                <div className="bg-sec-50 rounded-lg p-6 space-y-4">
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                      <h3 className="font-semibold text-gray-700">Date</h3>
-                      <p className="text-gray-900">
+                      <h3 className="font-semibold text-sec-700">Date</h3>
+                      <p className="text-sec-900">
                         {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
                           weekday: 'long',
                           year: 'numeric',
@@ -144,23 +144,23 @@ export function PublicPageUsageExample() {
                       </p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Venue</h3>
-                      <p className="text-gray-900">{event.event_venue || 'TBA'}</p>
+                      <h3 className="font-semibold text-sec-700">Venue</h3>
+                      <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Participants</h3>
-                      <p className="text-gray-900">{event.event_participants || 'TBA'}</p>
+                      <h3 className="font-semibold text-sec-700">Participants</h3>
+                      <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-700">Event Code</h3>
-                      <p className="text-gray-900 font-mono">{event.event_code}</p>
+                      <h3 className="font-semibold text-sec-700">Event Code</h3>
+                      <p className="text-sec-900 font-mono">{event.event_code}</p>
                     </div>
                   </div>
                   
                   {event.event_news && (
                     <div>
-                      <h3 className="font-semibold text-gray-700 mb-2">Event News</h3>
-                      <p className="text-gray-900">{event.event_news}</p>
+                      <h3 className="font-semibold text-sec-700 mb-2">Event News</h3>
+                      <p className="text-sec-900">{event.event_news}</p>
                     </div>
                   )}
                 </div>
@@ -177,20 +177,20 @@ export function PublicPageUsageExample() {
                   size="2xl"
                   className="rounded-lg shadow-lg"
                 />
-                <p className="mt-4 text-sm text-gray-600">Event Logo</p>
+                <p className="mt-4 text-sm text-sec-600">Event Logo</p>
               </div>
             </div>
           </div>
 
           {/* Recipe Grid Report Content */}
           <div className="mb-12">
-            <div className="bg-green-50 border border-green-200 rounded-lg p-6">
-              <h3 className="font-semibold text-green-900 mb-2">Recipe Grid Report</h3>
-              <p className="text-green-800">
+            <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+              <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
+              <p className="text-main-800">
                 This is where your recipe grid report content would go. 
                 The public page is now working correctly without authentication context conflicts.
               </p>
-              <div className="mt-4 text-sm text-green-700">
+              <div className="mt-4 text-sm text-main-700">
                 <p><strong>Event Code:</strong> {eventCode}</p>
                 <p><strong>Event ID:</strong> {event.event_id}</p>
                 <p><strong>Event Name:</strong> {event.event_name}</p>
@@ -200,9 +200,9 @@ export function PublicPageUsageExample() {
 
           {/* Event Footer Information */}
           {event.event_footer && (
-            <div className="bg-gray-50 rounded-lg p-6">
-              <h3 className="font-semibold text-gray-900 mb-2">Additional Information</h3>
-              <p className="text-gray-700">{event.event_footer}</p>
+            <div className="bg-sec-50 rounded-lg p-6">
+              <h3 className="font-semibold text-sec-900 mb-2">Additional Information</h3>
+              <p className="text-sec-700">{event.event_footer}</p>
             </div>
           )}
         </main>