@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");

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

@layer base {
  :root {
    --background: 240 4% 95%;
    --foreground: 240 5% 10%;

    --card: 0 0% 98%;
    --card-foreground: 240 5% 10%;

    --popover: 240 5% 90%;
    --popover-foreground: 240 5% 10%;

    --primary: 258 89% 66%;
    --primary-foreground: 250 100% 97%;

    --secondary: 240 5% 33%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 4% 83%;
    --muted-foreground: 240 5% 10%;

    --accent: 269 100% 98%;
    --accent-foreground: 270 91% 65%;

    --destructive: 0 72% 50%;
    --destructive-foreground: 0 85% 97%;

    --border: 240 4% 83%;
    --input: 240 4% 83%;
    --ring: 258 89% 66%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5% 10%;

    --sidebar-primary: 258 89% 66%;

    --sidebar-primary-foreground: 250 100% 97%;

    --sidebar-accent: 240 5% 33%;

    --sidebar-accent-foreground: 0 0% 98%;

    --sidebar-border: 240 4% 83%;

    --sidebar-ring: 258 89% 66%;

    --chart-1: 255 91% 76%;

    --chart-2: 270 95% 75%;

    --chart-3: 234 89% 73%;

    --chart-4: 258 89% 66%;

    --chart-5: 240 3% 46%;

    --sidebar: 0 0% 98%;

    --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

    --font-serif: 'Cormorant Garamond', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);

    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);

    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);

    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);

    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);

    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);

    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);

    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

    --tracking-normal: 0em;

    --spacing: 0.25rem;
  }

  .dark {
    --background: 240 5% 10%;
    --foreground: 0 0% 98%;

    --card: 240 3% 15%;
    --card-foreground: 0 0% 98%;

    --popover: 240 5% 26%;
    --popover-foreground: 0 0% 98%;

    --primary: 255 91% 76%;
    --primary-foreground: 261 72% 22%;

    --secondary: 240 3% 46%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3% 46%;
    --muted-foreground: 0 0% 98%;

    --accent: 273 86% 20%;
    --accent-foreground: 270 95% 75%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 85% 97%;

    --border: 240 5% 33%;
    --input: 240 5% 33%;
    --ring: 255 91% 76%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 255 91% 76%;
    --sidebar-primary-foreground: 261 72% 22%;
    --sidebar-accent: 270 95% 75%;
    --sidebar-accent-foreground: 273 86% 20%;
    --sidebar-border: 240 5% 33%;
    --sidebar-ring: 255 91% 76%;
    --chart-1: 252 94% 85%;
    --chart-2: 269 97% 85%;
    --chart-3: 229 93% 81%;
    --chart-4: 255 91% 76%;
    --chart-5: 240 3% 46%;
    --sidebar: 240 3% 15%;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  }
}

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

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