@font-face {
  font-family: "Montserrat";
  src: url(/fonts/Poppins/Poppins-Regular.ttf);
}

:root {
  --hsl-background: 200 60% 98%; /* Very light blue */
  --hsl-foreground: 200 80% 20%; /* Deep blue */
  --hsl-muted: 200 60% 92%; /* Light blue */
  --hsl-muted-foreground: 200 60% 40%; /* Medium blue */
  --hsl-popover: 200 60% 99%; /* Almost white with blue tint */
  --hsl-popover-foreground: 200 80% 20%; /* Deep blue */
  --hsl-card: 200 60% 99%; /* Almost white with blue tint */
  --hsl-card-foreground: 200 80% 20%; /* Deep blue */
  --hsl-border: 200 60% 85%; /* Light blue border */
  --hsl-input: 200 60% 92%; /* Light blue input */
  --hsl-primary: 190 90% 50%; /* Bright teal */
  --hsl-primary-foreground: 200 60% 98%; /* Very light blue */
  --hsl-secondary: 220 90% 60%; /* Deep ocean blue */
  --hsl-secondary-foreground: 200 60% 98%; /* Very light blue */
  --hsl-accent: 170 90% 45%; /* Seafoam green */
  --hsl-accent-foreground: 200 60% 98%; /* Very light blue */
  --hsl-destructive: 350 90% 60%; /* Coral red */
  --hsl-destructive-foreground: 200 60% 98%; /* Very light blue */
  --hsl-constructive: 160 90% 40%; /* Deep teal */
  --hsl-constructive-foreground: 200 60% 98%; /* Very light blue */
  --hsl-ring: 190 90% 50%; /* Bright teal ring */
  --hsl-radius: 1.5rem;
}

:root {
  --background: 200 60% 98%; /* Very light blue */
  --foreground: 200 80% 20%; /* Deep blue */
  --muted: 200 60% 92%; /* Light blue */
  --muted-foreground: 200 60% 40%; /* Medium blue */
  --popover: 200 60% 99%; /* Almost white with blue tint */
  --popover-foreground: 200 80% 20%; /* Deep blue */
  --card: 200 60% 99%; /* Almost white with blue tint */
  --card-foreground: 200 80% 20%; /* Deep blue */
  --border: 200 60% 85%; /* Light blue border */
  --input: 200 60% 92%; /* Light blue input */
  --primary: 190 90% 50%; /* Bright teal */
  --primary-foreground: 200 60% 98%; /* Very light blue */
  --secondary: 220 90% 60%; /* Deep ocean blue */
  --secondary-foreground: 200 60% 98%; /* Very light blue */
  --accent: 170 90% 45%; /* Seafoam green */
  --accent-foreground: 200 60% 98%; /* Very light blue */
  --destructive: 350 90% 60%; /* Coral red */
  --destructive-foreground: 200 60% 98%; /* Very light blue */
  --constructive: 160 90% 40%; /* Deep teal */
  --constructive-foreground: 200 60% 98%; /* Very light blue */
  --ring: 190 90% 50%; /* Bright teal ring */
  --radius: 1.5rem;
}