/* variables.css */
:root {
  /* Fruit-forward palette */
  --mango-yellow: #FFD166;
  --sky-blue: #7ec8e3;
  --peach-pink: #EF476F;
  --coral-accent: #F9C74F;
  --teal-accent: #06D6A0;

  --tag-light-color: var(--peach-pink);
  --tag-light-shadow: var(--sky-blue);

  --tag-dark-color: #a8dffc;
  /* a lighter sky-blue or whatever you prefer */
  --tag-dark-shadow: rgba(0, 0, 0, 0.4);

  /* header */
  --header-bg-light: rgba(255, 255, 255, 0.8);
  --header-text-light: var(--text-light);

  /* when over dark bg */
  --header-bg-dark: rgba(20, 0, 50, 0.8);
  --header-text-dark: var(--text-dark);

  /* Footer (light mode) */
  --footer-bg-light: var(--header-bg-light);
  --footer-text-light: var(--header-text-light);

  /* Footer (dark mode) */
  --footer-bg-dark: var(--header-bg-dark);
  --footer-text-dark: var(--header-text-dark);

  /* Neutrals */
  --bg-light: #FFF3E0;
  --bg-dark: #2B2D42;
  --text-light: #333333;
  --text-dark: #EDF2F4;

  /* light-mode waveform: hot pink */
  --wave-form-wave: #ff6bcb;
  --wave-form-progress: rgba(255, 107, 203, 0.7);

  --page-gutter: clamp(16px, 4vw, 40px);
  --hero-max: 1280px;
  /* the framed width for the hero image */

}

html[data-theme="dark"] {
  /* dark-mode waveform: fluorescent green */
  --wave-form-wave: #8aff6f;
  --wave-form-progress: rgba(138, 255, 111, 0.6);


  /* Logo-inspired dark */
  --record-purple: #3F0071;

  /* Buttons (light mode) */
  --btn-bg: var(--peach-pink);
  --btn-text: #ffffff;
  --btn-hover-bg: var(--coral-accent);

  /* Buttons (dark mode) */
  --btn-dark-bg: #4a148c;
  /* deep purple */
  --btn-dark-text: #ffffff;
  --btn-dark-hover-bg: #7e57c2;
  /* lighter purple */

  /* Header/Footer gradient (light mode) */
  --gradient-light: linear-gradient(90deg,
      var(--peach-pink) 0%,
      var(--mango-yellow) 50%,
      var(--peach-pink) 100%);

  /* Dark‐mode solid bar */
  --bar-dark: rgba(20, 0, 50, 0.8);

}

/* Dark‐mode override */
html[data-theme="dark"] {
  --bg-light: var(--bg-dark);
  --text-light: var(--text-dark);
}

.mix-card .waveform,
.mix-card .cover-container,
.mix-card img {
  max-width: 100%;
  height: auto;
}


/* Light is the default via :root (your current palette) */

/* Dark mode overrides */
html[data-theme="dark"] {
  /* base surfaces */
  --page-bg: radial-gradient(120% 100% at 50% 0%, #141626 0%, #0b0b12 60%);
  --surface: #121321;
  --surface-2: #16172a;

  /* text */
  --text: #e8e9ff;
  --text-dim: #b6b7d3;

  /* cards / glass */
  --glass-bg: color-mix(in oklab, var(--surface) 70%, transparent);
  --glass-stroke: rgba(255, 255, 255, .14);

  /* buttons (accent hues stay—dark just deepens contrast a bit) */
  --btn-text: #0b0b12;
}

/* Example usage if you paint the page bg somewhere */
body {
  background: var(--page-bg);
  color: var(--text);
}