/* Color Theme Definitions
   Each theme sets CSS variables. :root = Purple Night (default).
   Dark themes override gradient + accent only.
   Daylight (light) overrides surface/text colors for dark-tinted glass. */

:root {
  /* Background gradient */
  --bg-start: #667eea;
  --bg-end: #764ba2;

  /* Text */
  --text: #ffffff;

  /* Glass surfaces */
  --surface: rgba(255, 255, 255, 0.1);
  --surface-hover: rgba(255, 255, 255, 0.15);
  --surface-border: rgba(255, 255, 255, 0.2);

  /* Buttons */
  --btn-bg: rgba(255, 255, 255, 0.2);
  --btn-border: rgba(255, 255, 255, 0.3);
  --btn-hover-bg: rgba(255, 255, 255, 0.3);
  --btn-hover-border: rgba(255, 255, 255, 0.5);
  --btn-active-bg: rgba(255, 255, 255, 0.4);
  --btn-active-border: rgba(255, 255, 255, 0.6);

  /* Accent */
  --accent: #667eea;
  --accent-bg: rgba(102, 126, 234, 0.3);
  --accent-border: rgba(102, 126, 234, 0.6);

  /* Save button (green) */
  --save-bg: rgba(76, 175, 80, 0.3);
  --save-border: rgba(76, 175, 80, 0.5);
  --save-hover-bg: rgba(76, 175, 80, 0.5);
  --save-hover-border: rgba(76, 175, 80, 0.7);

  /* Danger */
  --danger-bg: rgba(255, 100, 100, 0.3);
  --danger-border: rgba(255, 100, 100, 0.5);
  --danger-text: #ff6b6b;

  /* Inputs */
  --input-bg: rgba(255, 255, 255, 0.2);
  --input-border: rgba(255, 255, 255, 0.3);

  /* Select option dropdown bg */
  --select-option-bg: #764ba2;

  /* Corner icons */
  --icon-color: rgba(255, 255, 255, 0.7);
  --icon-hover-color: rgba(255, 255, 255, 1);
  --icon-bg: rgba(255, 255, 255, 0.05);
  --icon-hover-bg: rgba(255, 255, 255, 0.15);

  /* Modal backdrop & surface */
  --modal-backdrop: rgba(0, 0, 0, 0.6);
  --modal-surface: var(--surface);

  /* Shadows */
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-heavy: rgba(0, 0, 0, 0.3);

  /* Text shadow */
  --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

  /* Beat indicators */
  --beat-border: rgba(255, 255, 255, 0.5);
  --beat-active: white;
  --beat-glow: rgba(255, 255, 255, 0.6);
}

/* Midnight */
[data-theme="midnight"] {
  --bg-start: #0f0c29;
  --bg-end: #302b63;
  --accent: #6c63ff;
  --accent-bg: rgba(108, 99, 255, 0.3);
  --accent-border: rgba(108, 99, 255, 0.6);
  --select-option-bg: #302b63;
}

/* Ocean */
[data-theme="ocean"] {
  --bg-start: #1a4971;
  --bg-end: #2d8cb9;
  --accent: #4fc3f7;
  --accent-bg: rgba(79, 195, 247, 0.3);
  --accent-border: rgba(79, 195, 247, 0.6);
  --select-option-bg: #1a4971;
}

/* Sunset */
[data-theme="sunset"] {
  --bg-start: #e74c3c;
  --bg-end: #f39c12;
  --accent: #f39c12;
  --accent-bg: rgba(243, 156, 18, 0.3);
  --accent-border: rgba(243, 156, 18, 0.6);
  --select-option-bg: #c0392b;
}

/* Daylight (light theme) */
[data-theme="daylight"] {
  --bg-start: #e8ecf1;
  --bg-end: #d5dde8;

  --text: #2c3e50;

  --surface: rgba(0, 0, 0, 0.06);
  --surface-hover: rgba(0, 0, 0, 0.1);
  --surface-border: rgba(0, 0, 0, 0.12);

  --btn-bg: rgba(0, 0, 0, 0.08);
  --btn-border: rgba(0, 0, 0, 0.15);
  --btn-hover-bg: rgba(0, 0, 0, 0.14);
  --btn-hover-border: rgba(0, 0, 0, 0.25);
  --btn-active-bg: rgba(0, 0, 0, 0.2);
  --btn-active-border: rgba(0, 0, 0, 0.3);

  --accent: #5b6abf;
  --accent-bg: rgba(91, 106, 191, 0.15);
  --accent-border: rgba(91, 106, 191, 0.5);

  --save-bg: rgba(56, 142, 60, 0.15);
  --save-border: rgba(56, 142, 60, 0.4);
  --save-hover-bg: rgba(56, 142, 60, 0.25);
  --save-hover-border: rgba(56, 142, 60, 0.6);

  --danger-bg: rgba(211, 47, 47, 0.12);
  --danger-border: rgba(211, 47, 47, 0.35);
  --danger-text: #c62828;

  --input-bg: rgba(0, 0, 0, 0.06);
  --input-border: rgba(0, 0, 0, 0.15);

  --select-option-bg: #d5dde8;

  --icon-color: rgba(44, 62, 80, 0.6);
  --icon-hover-color: rgba(44, 62, 80, 1);
  --icon-bg: rgba(0, 0, 0, 0.05);
  --icon-hover-bg: rgba(0, 0, 0, 0.1);

  --modal-backdrop: rgba(0, 0, 0, 0.4);
  --modal-surface: rgba(255, 255, 255, 0.88);

  --shadow: rgba(0, 0, 0, 0.06);
  --shadow-heavy: rgba(0, 0, 0, 0.15);

  --text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);

  --beat-border: rgba(44, 62, 80, 0.4);
  --beat-active: #2c3e50;
  --beat-glow: rgba(44, 62, 80, 0.4);
}

/* Rose */
[data-theme="rose"] {
  --bg-start: #ee5a6f;
  --bg-end: #f093fb;
  --accent: #f093fb;
  --accent-bg: rgba(240, 147, 251, 0.3);
  --accent-border: rgba(240, 147, 251, 0.6);
  --select-option-bg: #d44a5e;
}