@import "tailwindcss";

@variant dark (.dark &);

:root {
  --background: #ffffff;
  --foreground: #171717;
  color-scheme: light;
}

:root[data-theme="dark"],
.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
  color-scheme: dark;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode form elements */
:root input,
:root textarea,
:root select {
  color: #171717;
  background-color: #ffffff;
}

:root input::placeholder,
:root textarea::placeholder {
  color: #9ca3af;
}

/* Dark mode form elements */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
.dark input,
.dark textarea,
.dark select {
  color: #ededed;
  background-color: #1f2937;
  border-color: #374151;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
  color: #6b7280;
}