:root {
  --primary-color: #211b9b;
  --secondary-color: #372af3;
  --dark-color: #2f2e41;
  --light-color: #f8f9fa;
  --text-color: #333;
  --text-light: #595959;
  --white: #fff;
  --black: #000;
  --focus-color: #005fcc;
  --animation-accent: #6c63ff;
}

[data-theme="dark"] {
  --primary-color: #6b8e23;
  --secondary-color: #556b2f;
  --dark-color: #e8e8e8;
  --light-color: #1a1a1a;
  --text-color: #f0f0f0;
  --text-light: #b0b0b0;
  --white: #1a1a1a;
  --black: #f0f0f0;
  --focus-color: #8fbc8f;
  --animation-accent: #ff8c42;
}

body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--light-color);
  color: var(--text-color);
  transition: background-color .3s ease, color .3s ease;
}


:where(a) { color: var(--primary-color); }
:where(a:hover) { color: var(--secondary-color); }
:where(a, button, input):focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}