:root {
  --primary-color: #007aff;
  --secondary-color: #ff3b30;
  --tertiary-color: #34c759;
  --bg-color: #f8f9fb;
  --card-bg-color: #ffffff;
  --text-color: #1a1d26;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --header-bg: #f0f2f5;
  --header-text: #0056b3;
  --button-bg: #e3e6eb;
  --button-hover: #d6dae0;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --comparing-color: #e2b714;
  --swapping-color: #ff3b30;
  --sorted-color: #34c759;
  --border-radius: 15px;
  --spacing-unit: 1rem;
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 6px var(--shadow-color);
  --sidebar-bg: rgba(0, 122, 255, 0.9);
  --hover-color: rgba(255, 255, 255, 0.1);
  --dropdown-bg: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease-in-out;
}

/* Modern theme - Fresh nature-inspired palette */
body.theme-modern {
  --bg-color: #f0f7f4;
  --card-bg-color: #ffffff;
  --text-color: #2d3436;
  --text-muted: #636e72;
  --border-color: #b8e0d2;
  --header-bg: #ffffff;
  --header-text: #2d3436;
  --button-bg: #d8f3dc;
  --button-hover: #b7e4c7;
  --primary-color: #40916c;
  --secondary-color: #d8572a;
  --tertiary-color: #48a9a6;
  --shadow-color: rgba(64, 145, 108, 0.1);
  --sidebar-bg: rgba(64, 145, 108, 0.9);
  --hover-color: rgba(255, 255, 255, 0.15);
  --dropdown-bg: rgba(255, 255, 255, 0.1);
}

/* Dark theme - Dark mode version of root theme */
body.theme-dark {
  --bg-color: #1a1d24; /* Lightened from #121418 */
  --card-bg-color: #242830; /* Lightened from #1a1d26 */
  --text-color: #ffffff; /* Changed to pure white for better contrast */
  --text-muted: #a6aebb; /* Lightened from #9ba3af */
  --border-color: #363b47; /* Lightened from #2e333d */
  --header-bg: #242830; /* Matches card background */
  --header-text: #007aff;
  --button-bg: #363b47; /* Matches border color */
  --button-hover: #4a4f5c; /* Lightened from #3e424c */
  --shadow-color: rgba(0, 0, 0, 0.15);
  --primary-color: #007aff;
  --secondary-color: #ff3b30;
  --tertiary-color: #34c759;
  --comparing-color: #e2b714;
  --swapping-color: #ff3b30;
  --sorted-color: #34c759;
  --sidebar-bg: rgba(0, 122, 255, 0.8);
  --hover-color: rgba(255, 255, 255, 0.15);
  --dropdown-bg: rgba(255, 255, 255, 0.08);
}

/* Dark theme - Updated accent colors */
body.theme-royal {
  --bg-color: #2c3e50;
  --card-bg-color: #34495e;
  --text-color: #ecf0f1;
  --text-muted: #bdc3c7;
  --border-color: #465671;
  --header-bg: #2c3e50;
  --header-text: #ecf0f1;
  --button-bg: #465671;
  --button-hover: #576883;
  --primary-color: #3498db; /* Changed from purple to a clean blue */
  --secondary-color: #2ecc71; /* Changed from orange to emerald green */
  --tertiary-color: #f1c40f; /* Changed from teal to gold */
  --comparing-color: #3498db;
  --swapping-color: #2ecc71;
  --sorted-color: #f1c40f;
  --sidebar-bg: rgba(52, 152, 219, 0.8);
  --hover-color: rgba(255, 255, 255, 0.15);
  --dropdown-bg: rgba(255, 255, 255, 0.08);
}

/* Elegant theme */
body.theme-elegant {
  --bg-color: #fdf6e3;
  --card-bg-color: #fff8e7;
  --text-color: #2c3e50;
  --text-muted: #7f8c8d;
  --border-color: #eee8d5;
  --header-bg: #fdf6e3;
  --header-text: #b58900;
  --button-bg: #eee8d5;
  --button-hover: #e0d6c3;
  --primary-color: #c0392b;
  --secondary-color: #8e44ad;
  --tertiary-color: #16a085;
  --sidebar-bg: rgba(192, 57, 43, 0.85);
  --hover-color: rgba(255, 255, 255, 0.15);
  --dropdown-bg: rgba(255, 255, 255, 0.1);
}

/* Optimize transitions */
body,
body * {
  transition: background-color 0.3s ease-in-out, text-color 0.3s ease-in-out,
    border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}