:root {
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f8fafc;
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Audio visualizer bar animations */
@keyframes eqBar1 { 0%, 100% { height: 4px; } 50% { height: 18px; } }
@keyframes eqBar2 { 0%, 100% { height: 16px; } 50% { height: 6px; } }
@keyframes eqBar3 { 0%, 100% { height: 8px; } 50% { height: 22px; } }
@keyframes eqBar4 { 0%, 100% { height: 20px; } 50% { height: 8px; } }

.eq-bar-1 { animation: eqBar1 1.2s ease-in-out infinite; }
.eq-bar-2 { animation: eqBar2 0.9s ease-in-out infinite; }
.eq-bar-3 { animation: eqBar3 1.4s ease-in-out infinite; }
.eq-bar-4 { animation: eqBar4 1.1s ease-in-out infinite; }

/* Custom smooth scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Subtle gold glow */
.gold-glow {
  box-shadow: 0 0 25px -5px rgba(245, 158, 11, 0.25);
}

.emerald-glow {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.25);
}

/* Mobile & PWA Native Touch Optimizations */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Safe-area utilities for notched iPhones and gesture home bar */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-player-safe {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

/* Ensure smooth momentum scrolling in mobile overflow containers */
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent iOS Safari from auto-zooming on input focus */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* PWA Standalone Mode adjustments */
@media all and (display-mode: standalone) {
  body {
    user-select: none;
    -webkit-user-select: none;
  }
  input, textarea {
    user-select: text;
    -webkit-user-select: text;
  }
}

/* SiteMills Mobile Platform PWA Banner integration */
#sm-client-pwa-banner {
  bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 35 !important;
  border-radius: 16px !important;
  margin: 0 12px 8px 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2) !important;
}