:root {
  --bg-image: url("images/darkmode-bg.png");
  --bg-dark-overlay: rgba(15, 18, 40, 0.65);
  --surface-dark: #1e1f2f;
  --surface-dark-light: #2a2c3f;
  --accent-glow: #a78bfa;
  --text-primary: #edebff;
  --text-secondary: #c8c8d8;
  --text-muted: #c8c8d8;
  --text-muted-dark: #8e8eaf;
  --text-placeholder: rgba(237, 235, 255, 0.6);
  --glass-bg: rgba(30, 31, 47, 0.45);
  --glass-bg-strong: rgba(30, 31, 47, 0.85);
  --glass-border: rgba(167, 139, 250, 0.2);
  --glass-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  --gradient-btn-dark: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
  --gradient-btn-primary: var(--gradient-btn-dark);
  --gradient-rose-dark: linear-gradient(135deg, #ff4d8d 0%, #ff85a2 100%);
  --shadow-dark-premium: 0 20px 50px rgba(0, 0, 0, 0.4), 0 10px 25px rgba(109, 40, 217, 0.1);
  --shadow-glow: 0 0 20px rgba(167, 139, 250, 0.2);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-button: 0 8px 22px rgba(109, 40, 217, 0.32);
  --pastel-blush: #fff1f7;
  --pastel-lavender-light: #f3efff;
  --pastel-blue-light: #eaf6ff;
  --pastel-rose-tint: #fdebff;
  --pastel-lavender-muted: #cdb4ff;
  --pastel-pink-soft: #ffafcc;
  --pastel-purple-gray: #5d5d7a;
  --pastel-lavender-deep: #b794f6;
  --pastel-rose-accent: #ff85a2;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 50px;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="night"] {
  --bg-image: url("images/darkmode-bg.png");
  --bg-dark-overlay: rgba(15, 18, 40, 0.65);
  --surface-dark: #1e1f2f;
  --surface-dark-light: #2a2c3f;
  --accent-glow: #a78bfa;
  --text-primary: #edebff;
  --text-secondary: #c8c8d8;
  --text-muted: #c8c8d8;
  --text-muted-dark: #8e8eaf;
  --text-placeholder: rgba(237, 235, 255, 0.6);
  --glass-bg: rgba(30, 31, 47, 0.45);
  --glass-bg-strong: rgba(30, 31, 47, 0.85);
  --glass-border: rgba(167, 139, 250, 0.2);
  --glass-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  --gradient-btn-dark: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
  --gradient-btn-primary: var(--gradient-btn-dark);
  --shadow-button: 0 8px 22px rgba(109, 40, 217, 0.32);
  --btn-primary-text: #ffffff;
}

[data-theme="dark"] {
  --bg-image: url("images/darkmode-bg.png");
  --bg-dark-overlay: rgba(15, 18, 40, 0.65);
  --surface-dark: #1e1f2f;
  --surface-dark-light: #2a2c3f;
  --accent-glow: #a78bfa;
  --text-primary: #edebff;
  --text-secondary: #c8c8d8;
  --text-muted: #c8c8d8;
  --text-muted-dark: #8e8eaf;
  --text-placeholder: rgba(237, 235, 255, 0.6);
  --glass-bg: rgba(30, 31, 47, 0.45);
  --glass-bg-strong: rgba(30, 31, 47, 0.85);
  --glass-border: rgba(167, 139, 250, 0.2);
  --glass-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  --gradient-btn-dark: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
  --gradient-btn-primary: var(--gradient-btn-dark);
  --shadow-button: 0 8px 22px rgba(109, 40, 217, 0.32);
  --btn-primary-text: #ffffff;
}

[data-theme="dreamy"] {
  --bg-image: url("images/background.png");
  --bg-dark-overlay: rgba(255, 241, 247, 0.56);
  --surface-dark: #fff7fb;
  --surface-dark-light: #f4e8ff;
  --accent-glow: #a78bfa;
  --text-primary: #4b3f72;
  --text-secondary: #5f518a;
  --text-muted: #5f518a;
  --text-muted-dark: #72639f;
  --text-placeholder: rgba(75, 63, 114, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(167, 139, 250, 0.24);
  --glass-shadow: 0 12px 30px rgba(120, 86, 160, 0.16);
  --gradient-btn-dark: linear-gradient(135deg, #d7b8ff 0%, #a78bfa 100%);
  --gradient-btn-primary: var(--gradient-btn-dark);
  --shadow-button: 0 8px 20px rgba(167, 139, 250, 0.26);
  --btn-primary-text: #3b2f61;
}

[data-theme="light"] {
  --bg-image: url("images/background.png");
  --bg-dark-overlay: rgba(255, 241, 247, 0.56);
  --surface-dark: #fff7fb;
  --surface-dark-light: #f4e8ff;
  --accent-glow: #a78bfa;
  --text-primary: #4b3f72;
  --text-secondary: #5f518a;
  --text-muted: #5f518a;
  --text-muted-dark: #72639f;
  --text-placeholder: rgba(75, 63, 114, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(167, 139, 250, 0.24);
  --glass-shadow: 0 12px 30px rgba(120, 86, 160, 0.16);
  --gradient-btn-dark: linear-gradient(135deg, #d7b8ff 0%, #a78bfa 100%);
  --gradient-btn-primary: var(--gradient-btn-dark);
  --shadow-button: 0 8px 20px rgba(167, 139, 250, 0.26);
  --btn-primary-text: #3b2f61;
}

[data-theme="day"] {
  --bg-image: url("images/day.png");
  --bg-dark-overlay: rgba(232, 239, 255, 0.52);
  --surface-dark: #ffffff;
  --surface-dark-light: #eff3ff;
  --accent-glow: #8b5cf6;
  --text-primary: #1f2937;
  --text-secondary: #374151;
  --text-muted: #374151;
  --text-muted-dark: #4b5563;
  --text-placeholder: rgba(31, 41, 55, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(139, 92, 246, 0.22);
  --glass-shadow: 0 12px 30px rgba(78, 115, 201, 0.14);
  --gradient-btn-dark: linear-gradient(135deg, #8b5cf6 0%, #5b84ff 100%);
  --gradient-btn-primary: var(--gradient-btn-dark);
  --shadow-button: 0 8px 22px rgba(91, 132, 255, 0.26);
  --btn-primary-text: #ffffff;
}

[data-theme="sunset"] {
  --bg-image: url("images/sunset.png");
  --bg-dark-overlay: rgba(74, 32, 64, 0.62);
  --surface-dark: #4a2040;
  --surface-dark-light: #6a2d57;
  --accent-glow: #fb923c;
  --text-primary: #fff1e6;
  --text-secondary: #ffd9bf;
  --text-muted: #ffd9bf;
  --text-muted-dark: #ffba92;
  --text-placeholder: rgba(255, 241, 230, 0.62);
  --glass-bg: rgba(74, 32, 64, 0.48);
  --glass-bg-strong: rgba(74, 32, 64, 0.85);
  --glass-border: rgba(251, 146, 60, 0.3);
  --glass-shadow: 0 14px 32px rgba(58, 18, 45, 0.35);
  --gradient-btn-dark: linear-gradient(135deg, #fb923c 0%, #ff6f61 100%);
  --gradient-btn-primary: var(--gradient-btn-dark);
  --shadow-button: 0 8px 22px rgba(251, 146, 60, 0.28);
  --btn-primary-text: #ffffff;
}

@supports (background-image: image-set(url("x") 1x)) {
  :root {
    --bg-image: image-set(
      url("images/darkmode-bg.webp") type("image/webp") 1x,
      url("images/darkmode-bg.png") type("image/png") 1x
    );
  }

  [data-theme="night"],
  [data-theme="dark"] {
    --bg-image: image-set(
      url("images/darkmode-bg.webp") type("image/webp") 1x,
      url("images/darkmode-bg.png") type("image/png") 1x
    );
  }

  [data-theme="dreamy"],
  [data-theme="light"] {
    --bg-image: image-set(
      url("images/background.webp") type("image/webp") 1x,
      url("images/background.png") type("image/png") 1x
    );
  }

  [data-theme="day"] {
    --bg-image: image-set(
      url("images/day.webp") type("image/webp") 1x,
      url("images/day.png") type("image/png") 1x
    );
  }

  [data-theme="sunset"] {
    --bg-image: image-set(
      url("images/sunset.webp") type("image/webp") 1x,
      url("images/sunset.png") type("image/png") 1x
    );
  }
}