@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.
*/

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 187 100% 42%;
  --primary-foreground: 0 0% 100%;

  --secondary: 225 73% 57%;
  --secondary-foreground: 0 0% 100%;

  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;

  --accent: 187 100% 42%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 187 100% 42%;

  --radius: 0.75rem;

  --hero-gradient-start: 187 100% 42%;
  --hero-gradient-end: 199 98% 48%;
}

.dark {
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;

  --card: 225 73% 15%;
  --card-foreground: 210 40% 98%;

  --popover: 222 47% 11%;
  --popover-foreground: 210 40% 98%;

  --primary: 187 100% 42%;
  --primary-foreground: 0 0% 100%;

  --secondary: 225 73% 57%;
  --secondary-foreground: 0 0% 100%;

  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;

  --accent: 187 100% 42%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;

  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 187 100% 42%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Custom utility classes */
.bg-grid-white\/\[0\.05\] {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Accordion animations */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

.accordion-content {
  animation: accordion-down 0.2s ease-out;
}

.accordion-content[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}