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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 220 18% 8%;
    --foreground: 0 0% 95%;

    --card: 220 15% 12%;
    --card-foreground: 0 0% 95%;

    --popover: 220 15% 12%;
    --popover-foreground: 0 0% 95%;

    --primary: 174 72% 56%;
    --primary-foreground: 220 18% 8%;

    --secondary: 220 15% 18%;
    --secondary-foreground: 0 0% 95%;

    --muted: 220 15% 18%;
    --muted-foreground: 0 0% 65%;

    --accent: 174 72% 56%;
    --accent-foreground: 220 18% 8%;

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

    --border: 220 15% 18%;
    --input: 220 15% 18%;
    --ring: 174 72% 56%;

    --radius: 0.75rem;
    
    --stat-card: 220 15% 15%;
    --upload-area: 220 15% 10%;
  }
}

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

  body {
    @apply bg-background text-foreground;
  }
}