@import "tailwindcss";

:root {
  --bg-color: #ffffff;
  --card-bg: #f3f4f6;
  --text-color: #111827;
  --accent-red: #ef4444;
  --border-color: #e5e7eb;
}

[data-theme='dark'] {
  --bg-color: #09090b;
  --card-bg: #18181b;
  --text-color: #f4f4f5;
  --accent-red: #ef4444;
  --border-color: #27272a;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-transition {
  transition: all 0.3s ease !important;
}

/* Custom utility classes using variables */
.bg-app { background-color: var(--bg-color); }
.bg-card { background-color: var(--card-bg); }
.text-main { color: var(--text-color); }
.text-accent { color: var(--accent-red); }
.border-main { border-color: var(--border-color); }