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

@layer base {
  :root {
    --background: 205 38% 96%;
    --foreground: 214 38% 14%;

    --card: 0 0% 100%;
    --card-foreground: 214 38% 14%;

    --popover: 0 0% 100%;
    --popover-foreground: 214 38% 14%;

    --primary: 202 78% 34%;
    --primary-foreground: 0 0% 100%;

    --secondary: 200 28% 90%;
    --secondary-foreground: 214 30% 22%;

    --muted: 200 24% 92%;
    --muted-foreground: 213 15% 41%;

    --accent: 171 54% 34%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --border: 203 24% 84%;
    --input: 203 24% 84%;
    --ring: 202 78% 34%;

    --radius: 0.9rem;

    --sidebar-background: 208 43% 18%;
    --sidebar-foreground: 205 35% 92%;
    --sidebar-primary: 171 54% 34%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 208 31% 24%;
    --sidebar-accent-foreground: 205 35% 92%;
    --sidebar-border: 208 28% 28%;
    --sidebar-ring: 171 54% 34%;

    --success: 166 58% 34%;
    --success-foreground: 0 0% 100%;
    --warm: 202 78% 34%;
    --warm-light: 196 48% 92%;
  }

  .dark {
    --background: 212 32% 10%;
    --foreground: 200 24% 94%;

    --card: 212 28% 14%;
    --card-foreground: 200 24% 94%;

    --popover: 212 28% 14%;
    --popover-foreground: 200 24% 94%;

    --primary: 193 72% 56%;
    --primary-foreground: 210 40% 10%;

    --secondary: 212 20% 20%;
    --secondary-foreground: 200 24% 94%;

    --muted: 213 18% 19%;
    --muted-foreground: 208 16% 68%;

    --accent: 171 54% 34%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 63% 41%;
    --destructive-foreground: 0 0% 100%;

    --border: 212 18% 23%;
    --input: 212 18% 23%;
    --ring: 193 72% 56%;
    --sidebar-background: 212 32% 10%;
    --sidebar-foreground: 200 24% 94%;
    --sidebar-primary: 171 54% 34%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 212 20% 20%;
    --sidebar-accent-foreground: 200 24% 94%;
    --sidebar-border: 212 18% 23%;
    --sidebar-ring: 193 72% 56%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans;
    font-family: "Nunito", sans-serif;
    background-image:
      radial-gradient(circle at top left, hsl(188 40% 92%) 0%, transparent 28%),
      linear-gradient(180deg, hsl(200 35% 97%) 0%, hsl(210 26% 93%) 100%);
    min-height: 100vh;
  }

  #root {
    min-height: 100vh;
  }
}