/* Tailwind CSS v3.3.3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary colors */
  --color-primary: 0, 114, 188; /* #0072BC */
  --color-primary-dark: 0, 75, 135; /* #004B87 */
  --color-primary-light: 0, 178, 227; /* #00B2E3 */

  /* Secondary colors */
  --color-secondary-teal: 0, 155, 161; /* #009BA1 */
  --color-secondary-sky: 230, 247, 255; /* #E6F7FF */
  --color-secondary-green: 122, 184, 0; /* #7AB800 */
  
  --color-secondary-blue: 49, 130, 206;
  --color-secondary-indigo: 76, 81, 191;

  /* Research section colors */
  --color-research-primary: 41, 98, 255; /* Deep blue */
  --color-research-secondary: 0, 119, 182; /* Medium blue */
  --color-research-accent: 144, 224, 239; /* Light blue */
  --color-research-bacteria: 0, 150, 136; /* Teal */
  --color-research-oxygen: 3, 169, 244; /* Light blue */
  --color-research-kirlian: 156, 39, 176; /* Purple */
  --color-research-structure: 33, 150, 243; /* Blue */
  
  

  /* Neutral colors */
  --color-text: 51, 51, 51; /* #333333 */
  --color-background: 245, 245, 245; /* #F5F5F5 */
  --color-white: 255, 255, 255; /* #FFFFFF */

  /* Border radius */
  --radius: 0.5rem;
}

.font-inter {
  font-family: "Inter", sans-serif;
}

/* Custom utility classes */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Background gradients */
.bg-gradient-primary {
  background: linear-gradient(to right, rgb(var(--color-primary-dark)), rgb(var(--color-primary)));
}

/* Transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Colors */
.bg-primary {
  background-color: rgb(var(--color-primary));
}
.bg-primary-dark {
  background-color: rgb(var(--color-primary-dark));
}
.bg-primary-light {
  background-color: rgb(var(--color-primary-light));
}
.bg-secondary-teal {
  background-color: rgb(var(--color-secondary-teal));
}
.bg-secondary-sky {
  background-color: rgb(var(--color-secondary-sky));
}
.bg-secondary-green {
  background-color: rgb(var(--color-secondary-green));
}
.bg-text {
  background-color: rgb(var(--color-text));
}
.bg-background {
  background-color: rgb(var(--color-background));
}
.bg-white {
  background-color: rgb(var(--color-white));
}

.text-primary {
  color: rgb(var(--color-primary));
}
.text-primary-dark {
  color: rgb(var(--color-primary-dark));
}
.text-primary-light {
  color: rgb(var(--color-primary-light));
}
.text-secondary-teal {
  color: rgb(var(--color-secondary-teal));
}
.text-secondary-green {
  color: rgb(var(--color-secondary-green));
}
.text-text {
  color: rgb(var(--color-text));
}
.text-white {
  color: rgb(var(--color-white));
}

.border-primary {
  border-color: rgb(var(--color-primary));
}

.hover\:bg-primary:hover {
  background-color: rgb(var(--color-primary));
}
.hover\:bg-primary-dark:hover {
  background-color: rgb(var(--color-primary-dark));
}
.hover\:text-primary:hover {
  color: rgb(var(--color-primary));
}
.hover\:text-white:hover {
  color: rgb(var(--color-white));
}
.hover\:border-primary:hover {
  border-color: rgb(var(--color-primary));
}
/* Benefits section specific colors */
.bg-benefits-gradient {
  background: linear-gradient(
    135deg,
    rgb(var(--color-primary-dark)),
    rgb(var(--color-primary)),
    rgb(var(--color-primary-light))
  );
}

.bg-health-gradient {
  background: linear-gradient(135deg, rgb(var(--color-primary-dark)), rgb(var(--color-secondary-teal)));
}

.bg-garden-gradient {
  background: linear-gradient(135deg, rgb(var(--color-secondary-green)), rgb(var(--color-secondary-teal)));
}

.bg-environment-gradient {
  background: linear-gradient(135deg, rgb(var(--color-secondary-green)), rgb(var(--color-primary-light)));
}

.bg-home-gradient {
  background: linear-gradient(135deg, rgb(var(--color-secondary-teal)), rgb(var(--color-primary-light)));
}

/* Research section specific colors */
.bg-research-gradient {
  background: linear-gradient(135deg, rgb(var(--color-research-primary)), rgb(var(--color-research-secondary)));
}

.bg-research-video-gradient {
  background: linear-gradient(135deg, rgb(var(--color-research-secondary)), rgb(var(--color-research-accent)));
}

.bg-research-bacteria-gradient {
  background: linear-gradient(135deg, rgb(var(--color-research-bacteria)), rgb(var(--color-research-primary)));
}

.bg-research-oxygen-gradient {
  background: linear-gradient(135deg, rgb(var(--color-research-oxygen)), rgb(var(--color-research-secondary)));
}

.bg-research-kirlian-gradient {
  background: linear-gradient(135deg, rgb(var(--color-research-kirlian)), rgb(var(--color-research-accent)));
}

.bg-research-structure-gradient {
  background: linear-gradient(135deg, rgb(var(--color-research-structure)), rgb(var(--color-research-primary)));
}



/* Additional utility classes for benefits pages */
.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}