:root {
  --primary-color: #ffffff;
  --secondary-color: #f0f0f0;
  --accent-color: #2592ff;
  --background-color: #ffffff;
  --text-color: #000000;
  --border-color: #cccccc;
  --shadow-color: #ababab;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #1a1a1a;
    --secondary-color: #333333;
    --accent-color: #2592ff;
    --background-color: #121212;
    --text-color: #ffffff;
    --border-color: #444444;
    --shadow-color: #525252;
  }
}

.primary {
  color: var(--primary-color);
}

.secondary {
  color: var(--secondary-color);
}

.accent {
  color: var(--accent-color);
}

.background {
  background-color: var(--background-color);
}

.text {
  color: var(--text-color);
}

.border {
  border-color: var(--border-color);
}

.shadow {
  --tw-shadow-color: ;
}

html,
body {
  background-color: var(--background-color);
  color: var(--text-color);
}