:root {
  /* === Colors === */
  --color-bg: #222;
  --color-text: #fff;
  --color-accent: #ffa500;
  --color-highlight: #ffd700;
  --color-hover: #eda20c;
  --color-overlay: rgba(255, 255, 255, 0.1);

  /* === Gradients === */
  --gradient-seek: linear-gradient(to right, #ff8c00, #ffa500);
  --gradient-volume: linear-gradient(to right, #ffd700, #ffff66);
  --gradient-stroke: linear-gradient(to top, #ffa500, #ffd700);

  /* === Shadows === */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.6);

  /* === Images === */
  --bg-image: url("../../images/background.png");
  --cover-image: url("../../images/college-dropout-cover.jpg");
  --vinyl-image: url("../../images/vinyl.png");

  /* === Fonts === */
  --font-family: "Arial", Helvetica, sans-serif;
  --font-weight: bold;
}

body {
  background-color: var(--color-bg);
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}