:root {
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-text: #334155;
  --color-header-bg: #ffffff;
  --color-header-text: #334155;
  --color-main-bg: #f1f5f9;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

/* Theme utility classes used across the app. These mirror a few Tailwind-like helpers
  but are kept intentionally small and map to the CSS variables provided by the
  ThemeProvider. Using !important ensures they win over other utility classes when
  Tailwind isn't configured or when custom variables are injected at runtime. */
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }

/* Sidebar / header helpers */
.sidebar-bg { background-color: var(--color-sidebar-bg) !important; }
.sidebar-text { color: var(--color-sidebar-text) !important; }
.header-bg { background-color: var(--color-header-bg) !important; }
.header-text { color: var(--color-header-text) !important; }
.main-bg { background-color: var(--color-main-bg) !important; }

/* Small utility for buttons that should use the primary color for background + hover.
  If Tailwind is present it may override these; keep them as a reliable fallback. */
.btn-primary { background-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background-color: var(--color-primary-dark); }