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

:root {
  --background: 221.2 100% 95%;
  --foreground: 221.2 5% 10%;
  --card: 221.2 50% 90%;
  --card-foreground: 221.2 5% 15%;
  --popover: 221.2 100% 95%;
  --popover-foreground: 221.2 100% 10%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 0 0% 100%;
  --secondary: 221.2 30% 70%;
  --secondary-foreground: 0 0% 0%;
  --muted: 183.2 30% 85%;
  --muted-foreground: 221.2 5% 35%;
  --accent: 183.2 30% 80%;
  --accent-foreground: 221.2 5% 15%;
  --destructive: 0 100% 30%;
  --destructive-foreground: 221.2 5% 90%;
  --border: 221.2 30% 50%;
  --input: 221.2 30% 20%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 1rem;
  --next-blue: #c7d7fc;
}

.dark {
  --background: 221.2 50% 10%;
  --foreground: 221.2 5% 90%;
  --card: 221.2 50% 10%;
  --card-foreground: 221.2 5% 90%;
  --popover: 221.2 50% 5%;
  --popover-foreground: 221.2 5% 90%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 0 0% 100%;
  --secondary: 221.2 30% 20%;
  --secondary-foreground: 0 0% 100%;
  --muted: 183.2 30% 20%;
  --muted-foreground: 221.2 5% 60%;
  --accent: 183.2 30% 20%;
  --accent-foreground: 221.2 5% 90%;
  --destructive: 0 100% 30%;
  --destructive-foreground: 221.2 5% 90%;
  --border: 221.2 30% 20%;
  --input: 221.2 30% 20%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 1rem;
}

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

body {
  padding: 1rem !important;
}

html {
  scroll-behavior: smooth !important;
}
