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

  @layer base {
    :root {
      /* SB Admin 2 Color Scheme */
      --background: 218 33% 97%;
      --foreground: 218 9% 20%;

      --card: 0 0% 100%;
      --card-foreground: 218 9% 20%;

      --popover: 0 0% 100%;
      --popover-foreground: 218 9% 20%;

      /* SB Admin 2 Primary: #4e73df (blue) */
      --primary: 226 96% 62%;
      --primary-foreground: 0 0% 100%;

      /* SB Admin 2 Secondary: #858796 (gray) */
      --secondary: 213 7% 52%;
      --secondary-foreground: 0 0% 100%;

      /* SB Admin 2 Muted */
      --muted: 218 33% 97%;
      --muted-foreground: 213 7% 52%;

      /* SB Admin 2 Accent: #1cc88a (success/green) */
      --accent: 162 100% 41%;
      --accent-foreground: 0 0% 100%;

      /* SB Admin 2 Destructive: #e74c3c (danger/red) */
      --destructive: 9 90% 59%;
      --destructive-foreground: 0 0% 100%;

      --border: 218 18% 94%;
      --input: 218 33% 97%;
      --ring: 226 96% 62%;

      --radius: 0.375rem;

      /* Additional SB Admin 2 Colors */
      --warning: 44 92% 68%;
      --info: 187 68% 53%;
      --dark: 218 9% 20%;
      --light: 218 33% 97%;
    }

    .dark {
      --background: 218 9% 20%;
      --foreground: 0 0% 100%;

      --card: 218 9% 28%;
      --card-foreground: 0 0% 100%;

      --popover: 218 9% 20%;
      --popover-foreground: 0 0% 100%;

      --primary: 226 96% 62%;
      --primary-foreground: 0 0% 100%;

      --secondary: 213 7% 52%;
      --secondary-foreground: 0 0% 100%;

      --muted: 218 9% 28%;
      --muted-foreground: 213 7% 52%;

      --accent: 162 100% 41%;
      --accent-foreground: 0 0% 100%;

      --destructive: 9 90% 59%;
      --destructive-foreground: 0 0% 100%;

      --border: 218 9% 28%;
      --input: 218 9% 28%;
      --ring: 226 96% 62%;

      --warning: 44 92% 68%;
      --info: 187 68% 53%;
    }
  }

  @layer base {
    * {
      @apply border-border;
    }
    body {
      @apply bg-background text-foreground;
    }
  }