@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --accent: #f4f4f5;
  --accent-foreground: #171717;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --popover: #1c1c1c;
    --popover-foreground: #ededed;
    --accent: #27272a;
    --accent-foreground: #ededed;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --border: #27272a;
    --input: #27272a;
    --ring: #3b82f6;
  }
}

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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}