:root {
  --transition: 0.4s ease;
  --radius: 12px;
}

body[data-theme="dark"] {
  --bg: #0b0f1a;
  --bg-rgb: 11, 15, 26; /* For RGBA */
  --bg-soft: #12172a;
  --text: #ffffff;
  --muted: #b0b6ff;
  --accent: #7c7cff;

  /* Rope & Knob */
  --rope-color: rgba(255, 255, 255, 0.8);
  --knob-base: #e0e0e0;
  --knob-highlight: #ffffff;
  --knob-shadow: #a0a0a0;
}

body[data-theme="light"] {
  --bg: #f7f8fc;
  --bg-rgb: 247, 248, 252;
  --bg-soft: #ffffff;
  --text: #0b0f1a;
  --muted: #4a4f7c;
  --accent: #5a5aff;

  /* Rope & Knob */
  --rope-color: rgba(30, 30, 40, 0.8); /* Darker and more opaque */
  --knob-base: #2c3e50;
  --knob-highlight: #4ca1af;
  --knob-shadow: #1a252f;
}