feat: comprehensive light theme support across entire site

- CSS foundation: theme-aware scrollbars, section glows, glass cards with
  gold shadows, stronger animated borders and glow effects for light mode
- Hero: consistent dark-video treatment for both themes, brighter gold
  gradient text, glowing CTA button
- Gradient text: auto-switch to warm gold tones on light backgrounds via
  html:not(.dark) selector
- Team profile: inverted ambient photo bg with white overlay for light,
  dark text/borders, gold-dark labels for contrast
- All sections: text-neutral-500→600 upgrades for WCAG AA contrast,
  gold shadow accents on cards (About, Pricing, FAQ, DayCard, News)
- Admin: replaced hardcoded #c9a96e with theme tokens, fixed select
  options, array editor borders, booking badges contrast
- Header: white text on transparent hero, dark text after scroll
- UI components: BackToTop, FloatingHearts, ShowcaseLayout tabs,
  SignupModal, NewsModal, GroupCard adapted for light backgrounds
- Updated CLAUDE.md to reflect dual theme support

src/app/styles/animations.css

@@ -136,12 +136,12 @@
 .gradient-text {
   background: linear-gradient(
     135deg,
-    #8a6f3e 0%,
-    #c9a96e 20%,
-    #8a6f3e 40%,
-    #c9a96e 60%,
-    #6b5530 80%,
-    #8a6f3e 100%
+    #c9a96e 0%,
+    #e2c97e 20%,
+    #d4b87a 40%,
+    #e2c97e 60%,
+    #c9a96e 80%,
+    #d4b87a 100%
   );
   background-size: 200% 200%;
   -webkit-background-clip: text;
@@ -150,7 +150,12 @@
   animation: gradient-shift 6s ease-in-out infinite;
 }
 
-/* Light mode gradient text */
+/* Auto-switch gradient text for light mode */
+html:not(.dark) .gradient-text {
+  background-image: linear-gradient(135deg, #a08050 0%, #c9a96e 25%, #8a6f3e 50%, #c9a96e 75%, #a08050 100%);
+}
+
+/* Explicit light mode gradient text class (legacy) */
 .gradient-text-light {
   background: linear-gradient(135deg, #171717 0%, #c9a96e 50%, #171717 100%);
   background-size: 200% 200%;
@@ -172,7 +177,7 @@
   inset: 0;
   border-radius: inherit;
   padding: 1px;
-  background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.15));
+  background: linear-gradient(135deg, rgba(201, 169, 110, 0.5), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.3));
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
   pointer-events: none;
@@ -180,8 +185,16 @@
   opacity: 0.5;
 }
 
+:is(.dark) .animated-border::before {
+  background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.15));
+}
+
 .animated-border:hover::before {
   opacity: 1;
+  background: linear-gradient(135deg, rgba(201, 169, 110, 0.7), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.5));
+}
+
+:is(.dark) .animated-border:hover::before {
   background: linear-gradient(135deg, rgba(201, 169, 110, 0.6), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.4));
 }
 
@@ -192,10 +205,14 @@
 }
 
 .glow-hover:hover {
-  box-shadow: 0 0 30px rgba(201, 169, 110, 0.1), 0 0 60px rgba(201, 169, 110, 0.05);
+  box-shadow: 0 0 20px rgba(201, 169, 110, 0.25), 0 0 50px rgba(201, 169, 110, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
   transform: translateY(-4px);
 }
 
+:is(.dark) .glow-hover:hover {
+  box-shadow: 0 0 30px rgba(201, 169, 110, 0.1), 0 0 60px rgba(201, 169, 110, 0.05);
+}
+
 /* ===== Scroll Reveal ===== */
 
 .reveal {
@@ -345,6 +362,10 @@
 
 .section-divider {
   height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.4), transparent);
+}
+
+:is(.dark) .section-divider {
   background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);
 }
 

src/app/styles/components.css

@@ -6,7 +6,8 @@
   @apply hover:bg-gold-light hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
   @apply dark:bg-gold dark:text-black;
   @apply dark:hover:bg-gold-light dark:hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
-  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-gold-light focus-visible:ring-offset-2 focus-visible:ring-offset-black;
+  @apply active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
+  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-gold-light focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-black;
 }
 
 /* ===== Scrollbar ===== */

src/app/styles/theme.css

@@ -6,8 +6,8 @@
 }
 
 .surface-muted {
-  @apply bg-neutral-100;
-  @apply dark:bg-[var(--color-surface-deep)];
+  @apply bg-neutral-100 text-neutral-900;
+  @apply dark:bg-[var(--color-surface-deep)] dark:text-neutral-100;
 }
 
 .surface-glass {
@@ -16,8 +16,8 @@
 }
 
 .surface-card {
-  @apply bg-white/80 backdrop-blur-sm;
-  @apply dark:bg-neutral-900 dark:backdrop-blur-sm;
+  @apply bg-white shadow-sm backdrop-blur-sm;
+  @apply dark:bg-neutral-900 dark:shadow-none dark:backdrop-blur-sm;
 }
 
 /* ===== Borders ===== */
@@ -73,20 +73,25 @@
   transform: translateX(-50%);
   width: min(600px, 100%);
   height: 400px;
-  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
+  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.15), transparent 70%);
   pointer-events: none;
 }
 
+:is(.dark) .section-glow::before {
+  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
+}
+
 /* ===== Glass Card ===== */
 
 .glass-card {
   @apply rounded-2xl border backdrop-blur-sm transition-all duration-300;
-  @apply border-neutral-200/80 bg-white/90;
-  @apply dark:border-white/[0.06] dark:bg-white/[0.04];
+  @apply border-neutral-200/80 bg-white/90 shadow-sm shadow-gold/[0.04];
+  @apply dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-none;
 }
 
 .glass-card:hover {
-  @apply dark:border-gold/15 dark:bg-white/[0.06];
+  @apply border-gold/30 bg-white shadow-md shadow-gold/[0.08];
+  @apply dark:border-gold/15 dark:bg-white/[0.06] dark:shadow-none;
 }
 
 /* ===== Photo Filter ===== */
@@ -99,10 +104,43 @@
   filter: saturate(0.6) sepia(0.2) brightness(0.9) contrast(1.1);
 }
 
+/* ===== Modal Surface ===== */
+
+.modal-surface {
+  @apply bg-white dark:bg-neutral-950;
+}
+
+/* ===== Theme Input ===== */
+
+.theme-input {
+  @apply border-neutral-300 bg-neutral-50 text-neutral-900 placeholder-neutral-400;
+  @apply focus:border-gold/60 focus:bg-white;
+  @apply dark:border-white/[0.08] dark:bg-white/[0.04] dark:text-white dark:placeholder-neutral-500;
+  @apply dark:focus:border-gold/40 dark:focus:bg-white/[0.06];
+}
+
+/* ===== Admin Surface ===== */
+
+.admin-surface {
+  @apply bg-white text-neutral-900 dark:bg-neutral-950 dark:text-white;
+}
+
+.admin-sidebar {
+  @apply bg-neutral-100 border-neutral-200 dark:bg-neutral-900 dark:border-white/10;
+}
+
+.admin-nav-item {
+  @apply text-neutral-500 hover:text-neutral-900 hover:bg-neutral-200/60 dark:text-neutral-400 dark:hover:text-white dark:hover:bg-white/5;
+}
+
 /* ===== Custom Scrollbar ===== */
 
 .styled-scrollbar {
   scrollbar-width: thin;
+  scrollbar-color: rgba(160, 160, 160, 0.5) transparent;
+}
+
+:is(.dark) .styled-scrollbar {
   scrollbar-color: rgba(201, 169, 110, 0.25) transparent;
 }
 
@@ -116,10 +154,18 @@
 }
 
 .styled-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(201, 169, 110, 0.25);
+  background: rgba(160, 160, 160, 0.5);
   border-radius: 4px;
 }
 
+:is(.dark) .styled-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(201, 169, 110, 0.25);
+}
+
 .styled-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(120, 120, 120, 0.6);
+}
+
+:is(.dark) .styled-scrollbar::-webkit-scrollbar-thumb:hover {
   background: rgba(201, 169, 110, 0.4);
 }