/* wavelab design system override for SoundMeta */

:root {
  --background: 234 20% 97%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 4%;
  --primary: 234 97% 54%;
  --primary-foreground: 0 0% 100%;
  --secondary: 234 20% 93%;
  --secondary-foreground: 0 0% 4%;
  --muted: 234 20% 93%;
  --muted-foreground: 0 0% 40%;
  --accent: 271 92% 58%;
  --accent-foreground: 0 0% 100%;
  --border: 234 20% 87%;
  --input: 234 20% 87%;
  --ring: 234 97% 54%;
  --radius: 1.25rem;
}

.dark {
  --background: 240 20% 8%;
  --foreground: 0 0% 95%;
  --card: 240 18% 13%;
  --card-foreground: 0 0% 95%;
  --popover: 240 18% 13%;
  --popover-foreground: 0 0% 95%;
  --primary: 234 97% 63%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 18% 20%;
  --secondary-foreground: 0 0% 95%;
  --muted: 240 18% 20%;
  --muted-foreground: 0 0% 55%;
  --accent: 271 92% 65%;
  --accent-foreground: 0 0% 100%;
  --border: 240 18% 23%;
  --input: 240 18% 23%;
  --ring: 234 97% 63%;
}

/* Typography — Montserrat */
html, body, * {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Border radius */
.rounded-md { border-radius: 12px !important; }
.rounded-lg { border-radius: 20px !important; }

/* Action buttons — animated arrow style */
.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 36px;
  border: 4px solid transparent;
  font-size: 0.75rem;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 700;
  color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary));
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: hsl(var(--primary));
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 { right: 16px; }
.animated-button .arr-2 { left: -25%; }

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: hsl(var(--primary));
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #fff;
  border-radius: 12px;
}

.animated-button:hover .arr-1 { right: -25%; }
.animated-button:hover .arr-2 { left: 16px; }
.animated-button:hover .text { transform: translateX(12px); }
.animated-button:hover svg { fill: #fff; }

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px hsl(var(--primary));
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

.animated-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Header */
header {
  box-shadow: none !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

.dark header {
  background: rgba(13, 14, 22, 0.88) !important;
}

header h1 {
  font-size: 1rem !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  font-weight: 500 !important;
}

header img {
  height: 2.5rem !important;
  width: 2.5rem !important;
}

/* Section headings */
h3.text-xl {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.5 !important;
}

/* Card */
.shadow-xl {
  box-shadow: 0 4px 40px rgba(26, 47, 251, 0.06), 0 1px 0 rgba(26, 47, 251, 0.08) !important;
  border-radius: 20px !important;
}

/* Main heading */
.text-3xl { letter-spacing: -0.02em !important; }

/* Footer */
footer {
  background: transparent !important;
  border-top: 1px solid hsl(var(--border)) !important;
}