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

/* Base body style */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Example custom utility */
@layer utilities {
  .text-balance {
    text-wrap: balance; /* This works if your browser supports it */
  }
}

/* Example color tokens for theming */
@layer base {
  :root {
    --background: #ffffff;
    --foreground: #0a0a0a;
    --primary: #0a0a0a;
    --primary-foreground: #fafafa;
    --secondary: #f5f5f5;
    --secondary-foreground: #0a0a0a;
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --accent: #f5f5f5;
    --accent-foreground: #0a0a0a;
    --destructive: #ef4444;
    --destructive-foreground: #fafafa;
    --border: #e5e5e5;
    --input: #e5e5e5;
    --ring: #0a0a0a;
    --radius: 0.5rem;
  }

  .dark {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #0a0a0a;
    --secondary: #262626;
    --secondary-foreground: #fafafa;
    --muted: #262626;
    --muted-foreground: #a3a3a3;
    --accent: #262626;
    --accent-foreground: #fafafa;
    --destructive: #b91c1c;
    --destructive-foreground: #fafafa;
    --border: #262626;
    --input: #262626;
    --ring: #d4d4d8;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-[var(--background)] text-[var(--foreground)];
  }
}