/* === GLOBAL VARIABLES === */
:root {
  --primary-color: #1a2a6c;
  --secondary-color: #b21f1f;
  --background-color: #fdbb2d;
  --text-color: #ffffff;
  --accent-color: #ff6f61;
  --highlight-color: #ff6f61;
}

/* === DARK THEME === */
[data-theme="dark"] {
  --primary-color: #333333;
  --secondary-color: #444444;
  --background-color: #000000;
  --text-color: #f1f1f1;
  --accent-color: #ff6f61;
}

/* === LIGHT THEME === */
[data-theme="light"] {
  --primary-color: #ffffff;
  --secondary-color: #eeeeee;
  --background-color: #dddddd;
  --text-color: #222222;
  --accent-color: #ff6f61;
}

/* === TRANSITION === */
* {
  transition: background-color 0.3s ease, color 0.3s ease;
}