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

:root,
html.light {
  --background: #ffffff;
  --foreground: #171717;
  --base: #f5f5f5;
  --offbase: #dbdbdb;
  --accent: #ef4444;
  --muted: #737373;
}

html.dark {
  --background: #111111;
  --foreground: #ededed;
  --base: #1f1f1f;
  --offbase: #4a4a4a;
  --accent: #f87171;
  --muted: #a3a3a3;
}

/* Ensure background color is set before content loads */
html {
  background-color: var(--background);
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}