feat(colors): enhance light and dark mode color schemes with new glow accents and shadow tokens

themes/lucentui/css/app.css

@@ -166,6 +166,154 @@ html {
   box-shadow: var(--shadow-glow-secondary-sm);
 }
 
+/* =============================================================================
+   GLASS PANEL — a lighter-weight variant than .card-glass for inline panels,
+   modals, dropdowns, and popovers. Uses the semantic --color-glass tokens
+   so light/dark modes render correctly.
+   ============================================================================= */
+@utility glass-panel {
+  background-color: hsl(var(--color-glass));
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  border: 1px solid hsl(var(--color-glass-border));
+  border-radius: 0.875rem;
+}
+
+@utility glass-panel-hover {
+  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
+}
+.glass-panel-hover:hover {
+  border-color: hsl(var(--color-primary) / 0.5);
+  box-shadow: var(--shadow-glow-primary-sm);
+}
+
+/* =============================================================================
+   NEON BORDER — conic-gradient animated border for showcase/cta elements.
+   Wrap target content; relies on @property for smooth animation.
+   ============================================================================= */
+@property --neon-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@utility neon-border {
+  position: relative;
+  isolation: isolate;
+}
+.neon-border::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: conic-gradient(from var(--neon-angle),
+    hsl(var(--color-primary) / 0.7),
+    hsl(var(--color-secondary) / 0.7),
+    hsl(var(--color-primary) / 0.7));
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  animation: neon-spin 6s linear infinite;
+  pointer-events: none;
+  z-index: -1;
+}
+@keyframes neon-spin {
+  to { --neon-angle: 360deg; }
+}
+
+/* =============================================================================
+   GRID BG — subtle SVG grid with radial mask for depth on layout backgrounds.
+   ============================================================================= */
+@utility grid-bg {
+  background-image:
+    linear-gradient(to right, hsl(var(--color-neutral) / 0.12) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(var(--color-neutral) / 0.12) 1px, transparent 1px);
+  background-size: 48px 48px;
+  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 80%);
+          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 80%);
+}
+
+/* =============================================================================
+   NOISE OVERLAY — ~2% opacity grainy texture (data URI SVG feTurbulence).
+   Add to a ::before or dedicated layer for film-grain effect.
+   ============================================================================= */
+@utility noise-overlay {
+  position: relative;
+}
+.noise-overlay::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.035;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
+  z-index: 0;
+}
+
+/* =============================================================================
+   TEXT GRADIENT — primary → secondary clip fill for display headings.
+   ============================================================================= */
+@utility text-gradient-primary {
+  background-image: linear-gradient(90deg, hsl(var(--color-primary)), hsl(var(--color-secondary)));
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+/* =============================================================================
+   DISPLAY SCALE — hero/marketing headline sizes.
+   ============================================================================= */
+@utility display-xl {
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: -0.035em;
+}
+@utility display-lg {
+  font-size: clamp(2rem, 4.5vw, 3.25rem);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+/* =============================================================================
+   TABULAR NUMS — for currency, counters, live metrics.
+   ============================================================================= */
+@utility tnum {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+}
+
+/* =============================================================================
+   ELEVATION TOKENS — token-driven shadows preferred over raw rgba utilities.
+   ============================================================================= */
+@utility shadow-elevated {
+  box-shadow: var(--shadow-elevated);
+}
+@utility shadow-floating {
+  box-shadow: var(--shadow-floating);
+}
+
+/* =============================================================================
+   REDUCED MOTION — disable non-essential animations for accessibility.
+   ============================================================================= */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .neon-border::before {
+    animation: none !important;
+  }
+}
+
 /* Line clamp utilities - removed excessive containment */
 .line-clamp-2 {
     display: -webkit-box;