:root {
  /* ===== PRIMARY THEME COLORS ===== */
  --bg-top: #f8f9fa;
  --bg-bottom: #e9ecef;
  --bg-primary-card: #ffffff;
  --bg-secondary-card: #f8f9fa;

  /* ===== TEXT COLORS ===== */
  --title-text: #000000;
  --primary-text: #000000;
  --secondary-text: #666666;
  --paragraph-text: #333;

  /* ===== BORDER COLORS ===== */
  --primary-border: #000000;
  --secondary-border: #ddd;

  /* ===== SHADOW COLORS ===== */
  --shadow-light: rgba(0, 0, 0, 0.15);
  --shadow-medium: rgba(0, 0, 0, 0.2);

  /* ===== BUTTON COLORS ===== */
  --bg-primary-button: #000000;
  --text-primary-button: #ffffff;
  --bg-primary-button-hover: #ffffff;
  --text-primary-button-hover: #000000;
  --bg-transparent-button: rgba(0, 0, 0, 0.6);
  --bg-transparent-button-hover: rgba(0, 0, 0, 0.9);
  --text-transparent-button: #ffffff;
  --indicator: #cccccc;
  --indicator-selected: #000000;
}

/* ===== JELLYFISH MODE THEME ===== */
html[data-theme='jellyfish'] {
  /* ===== PRIMARY THEME COLORS ===== */
  --bg-top: #2281b1;
  --bg-bottom: #032e72;
  --bg-primary-card: #61a5c3;
  --bg-secondary-card: #7d6bd1;

  /* ===== TEXT COLORS ===== */
  --title-text: #5be6a1;
  --primary-text: #ffffff;
  --secondary-text: #00f5ff;
  --paragraph-text: #d1eeff;

  /* ===== BORDER COLORS ===== */
  --primary-border: #5be6a1;
  --secondary-border: #a6c1ff;

  /* ===== SHADOW COLORS ===== */
  --shadow-light: rgba(0, 245, 255, 0.35);
  --shadow-medium: rgba(154, 125, 255, 0.45);

  /* ===== BUTTON COLORS ===== */
  --bg-primary-button: #82faff;
  --text-primary-button: #032e72;
  --bg-primary-button-hover: #5be6a1;
  --text-primary-button-hover: #032e72;
  --bg-transparent-button: rgba(0, 245, 255, 0.35);
  --bg-transparent-button-hover: rgba(0, 245, 255, 0.55);
  --text-transparent-button: #ffffff;
  --indicator: rgba(255, 255, 255, 0.4);
  --indicator-selected: #00f5ff;
}

html[data-theme='jellyfish'] body {
  background: linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-bottom) 100%);
}