frontend/src/app/globals.css

@import "tailwindcss";

@theme {
  --color-primary: #1877F2;
  --color-primary-hover: #166FE5;
}

@layer base {
  body {
    background-color: #050505;
    color: #E4E6EB;
    background-attachment: fixed;
    min-height: 100vh;
    font-family: var(--font-inter), sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-outfit), sans-serif;
  }
}

/* Custom Audio Player styles */
@layer utilities {
  audio::-webkit-media-controls-panel {
    background-color: var(--border);
  }
  audio::-webkit-media-controls-current-time-display,
  audio::-webkit-media-controls-time-remaining-display {
    color: #fff;
  }
}

/* Progress bar shimmer animation */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.animate-shimmer {
  animation: shimmer 1.5s infinite;
}