@custom-variant dark (&:where(.dark, .dark *));

@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-accent: #2563EB;
  --color-accent-hover: #1D4ED8;
}

:root {
  --chart-grid: #E5E7EB;
  --chart-text: #64748B;
  --chart-tooltip-bg: white;
  --chart-tooltip-border: #E5E7EB;
  --chart-tooltip-text: #111827;
}
.dark {
  --chart-grid: #334155;
  --chart-text: #94A3B8;
  --chart-tooltip-bg: #1E293B;
  --chart-tooltip-border: #334155;
  --chart-tooltip-text: #E2E8F0;
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
  }

  *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
  }
}