/* Base colors */
:root {
  --accent: 136, 58, 234;
  --accent-light: 224, 204, 250;
  --accent-dark: 49, 10, 101;
  --accent-gradient: linear-gradient(
    45deg,
    rgb(var(--accent)),
    rgb(var(--accent-light)) 30%,
    white 60%
  );

  /* Light mode colors */
  --background: #ffffff;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --surface: #ffffff;
  --surface-hover: #f3f4f6;
  --border: #e5e7eb;
  --shadow: rgba(0, 0, 0, 0.1);
  --input-background: #ffffff;
  --input-border: #e5e7eb;
  --input-text: #111827;
  --button-background: #f3f4f6;
  --button-text: #374151;
  --stats-background: #f9fafb;
  --stats-text: #111827;
  --stats-label: #6b7280;
}

/* Dark mode colors */
html.dark {
  --background: #111827;
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --surface: #1f2937;
  --surface-hover: #374151;
  --border: #374151;
  --shadow: rgba(0, 0, 0, 0.25);
  --input-background: #1f2937;
  --input-border: #374151;
  --input-text: #f3f4f6;
  --button-background: #374151;
  --button-text: #f3f4f6;
  --stats-background: #1f2937;
  --stats-text: #f3f4f6;
  --stats-label: #9ca3af;
  --accent-gradient: linear-gradient(
    45deg,
    rgb(var(--accent)),
    rgb(var(--accent-light)) 30%,
    #1f2937 60%
  );
}

/* Common elements */
body {
  background: var(--background);
  color: var(--text-primary);
}

/* Text colors */
.text-gray-900 {
  color: var(--text-primary) !important;
}

.text-gray-800 {
  color: var(--text-primary) !important;
}

.text-gray-700 {
  color: var(--text-primary) !important;
}

.text-gray-600 {
  color: var(--text-secondary) !important;
}

.text-gray-500 {
  color: var(--stats-label) !important;
}

/* Backgrounds */
.bg-white {
  background-color: var(--surface) !important;
}

.bg-gray-50 {
  background-color: var(--stats-background) !important;
}

/* Borders */
.border {
  border-color: var(--border) !important;
}

.border-gray-100 {
  border-color: var(--border) !important;
}

.border-gray-200 {
  border-color: var(--border) !important;
}

/* Shadows */
.shadow-md {
  box-shadow: 0 4px 6px -1px var(--shadow) !important;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px var(--shadow) !important;
}

/* Form elements */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background-color: var(--input-background) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: rgb(var(--accent)) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent), 0.2) !important;
}

/* Buttons */
.btn,
button[type="button"],
button[type="submit"] {
  background-color: var(--button-background) !important;
  color: var(--button-text) !important;
  border-color: var(--border) !important;
}

.btn:hover,
button[type="button"]:hover,
button[type="submit"]:hover {
  background-color: var(--surface-hover) !important;
}

/* Transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}