/* 🎨 Base Variables */
:root {
  /* --bg-color: #dbdee7;
  --text-color: #222;
  --accent-color: #007bff;
  --card-bg: #fff;
  --border-color: #e0e0e0; */
  /* Using "Ocean Theme" by default */
  --bg-color: #eaf6f6;
  --text-color: #022c43;
  --accent-color: #00adb5;
  --card-bg: #ffffff;
  --border-color: #a7c5c5;
}

/* 🌙 Dark Theme */
html[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
  --accent-color: #66d9ef;
  --card-bg: #1e1e1e;
  --border-color: #333;
}

/* 🌊 Ocean Theme */
html[data-theme="ocean"] {
  --bg-color: #eaf6f6;
  --text-color: #022c43;
  --accent-color: #00adb5;
  --card-bg: #ffffff;
  --border-color: #a7c5c5;
}

/* 🌇 Sunset Theme */
html[data-theme="sunset"] {
  --bg-color: #fff4e6;
  --text-color: #3e2723;
  --accent-color: #ff7043;
  --card-bg: #ffffff;
  --border-color: #ffccbc;
}

/* 🌈 Apply Colors */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1 {
    font-family: 'Copse';
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

a {
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.dark-icon path{
    fill: var(--text-color);
}

/* Scrollbar CSS */
/* 🖌 Global Theme-Aware Scrollbar */

/* Default scrollbar variables (light theme) */
:root {
  --scrollbar-track: #f0f0f0;
  --scrollbar-thumb: #0078ff;
  --scrollbar-thumb-hover: #005fcc;
}

/* Dark theme overrides */
html[data-theme="dark"] {
  --scrollbar-track: #2b2b2b;
  --scrollbar-thumb: #66d9ef;
  --scrollbar-thumb-hover: #44ccee;
}

/* Ocean theme overrides */
html[data-theme="ocean"] {
  --scrollbar-track: #d4f0f0;
  --scrollbar-thumb: #00adb5;
  --scrollbar-thumb-hover: #009ca8;
}

/* Sunset theme overrides */
html[data-theme="sunset"] {
  --scrollbar-track: #ffe8d6;
  --scrollbar-thumb: #ff7043;
  --scrollbar-thumb-hover: #e85c2c;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Webkit Browsers (Chrome, Edge, Safari, Opera) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /* horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 5px;
  border: 2px solid var(--scrollbar-track);
  /* padding effect */
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}