/* Import Tailwind CSS base styles */
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* Define root-level CSS variables for background and foreground colors */
:root {
  --background: #E1E9E4; /* Main background color */
  --foreground: #0F2830; /* Main text color */
}

/* Inline theme variables for use in custom theming */
@theme inline {
  --color-background: var(--background); /* Theme background color */
  --color-foreground: var(--foreground); /* Theme text color */
  --font-sans: var(--font-geist-sans);   /* Custom sans-serif font variable */
  --font-mono: var(--font-geist-mono);   /* Custom monospace font variable */
}

/* Apply background, text color, and font to the body element */
body {
  background: var(--background); /* Use the background variable */
  color: var(--foreground);      /* Use the foreground variable */
  font-family: Arial, Helvetica, sans-serif; /* Fallback font stack */
}