@layer theme {
  :root {
    /* Primary Green Colors */
    --color-primary-50: oklch(99% 0.01 154);
    --color-primary-100: oklch(97% 0.04 154);
    --color-primary-200: oklch(93% 0.08 154);
    --color-primary-300: oklch(85% 0.13 154);
    --color-primary-400: oklch(77% 0.18 154);
    --color-primary-500: oklch(67% 0.22 154);
    --color-primary-600: oklch(58% 0.19 154);
    --color-primary-700: oklch(49% 0.15 154);
    --color-primary-800: oklch(41% 0.12 154);
    --color-primary-900: oklch(33% 0.10 154);
    --color-primary-950: oklch(19% 0.05 154);
  }
}

/* Custom utility classes for primary colors */
@layer utilities {
  .bg-primary {
    background-color: var(--color-primary-500);
  }

  .bg-primary\! {
    background-color: var(--color-primary-500) !important;
  }

  .bg-primary-50 {
    background-color: var(--color-primary-50);
  }

  .bg-primary-100 {
    background-color: var(--color-primary-100);
  }

  .bg-primary-200 {
    background-color: var(--color-primary-200);
  }

  .bg-primary-300 {
    background-color: var(--color-primary-300);
  }

  .bg-primary-400 {
    background-color: var(--color-primary-400);
  }

  .bg-primary-500 {
    background-color: var(--color-primary-500);
  }

  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }

  .bg-primary-700 {
    background-color: var(--color-primary-700);
  }

  .bg-primary-800 {
    background-color: var(--color-primary-800);
  }

  .bg-primary-900 {
    background-color: var(--color-primary-900);
  }

  .bg-primary-950 {
    background-color: var(--color-primary-950);
  }

  .text-primary {
    color: var(--color-primary-500);
  }

  .text-primary-50 {
    color: var(--color-primary-50);
  }

  .text-primary-100 {
    color: var(--color-primary-100);
  }

  .text-primary-200 {
    color: var(--color-primary-200);
  }

  .text-primary-300 {
    color: var(--color-primary-300);
  }

  .text-primary-400 {
    color: var(--color-primary-400);
  }

  .text-primary-500 {
    color: var(--color-primary-500);
  }

  .text-primary-600 {
    color: var(--color-primary-600);
  }

  .text-primary-700 {
    color: var(--color-primary-700);
  }

  .text-primary-800 {
    color: var(--color-primary-800);
  }

  .text-primary-900 {
    color: var(--color-primary-900);
  }

  .text-primary-950 {
    color: var(--color-primary-950);
  }

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

  .border-primary\! {
    border-color: var(--color-primary-500) !important;
  }

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

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

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

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

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

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

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

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

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

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

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

  .outline-primary {
    outline-color: var(--color-primary-500);
  }

  .outline-primary-600 {
    outline-color: var(--color-primary-600);
  }

  .hover\:bg-primary:hover {
    background-color: var(--color-primary-500);
  }

  .hover\:bg-primary\/5:hover {
    background-color: color-mix(in oklab, var(--color-primary-500) 5%, transparent);
  }

  .hover\:bg-primary-600:hover {
    background-color: var(--color-primary-600);
  }

  .dark\:hover\:bg-primary\/10:hover {
    background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent);
  }

  .hover\:text-primary:hover {
    color: var(--color-primary-500);
  }

  .hover\:text-primary-600:hover {
    color: var(--color-primary-600);
  }

  .hover\:border-primary:hover {
    border-color: var(--color-primary-500);
  }

  .focus\:outline-primary:focus {
    outline-color: var(--color-primary-500);
  }

  .focus\:outline-primary-600:focus {
    outline-color: var(--color-primary-600);
  }

  .focus-visible\:outline-primary:focus-visible {
    outline-color: var(--color-primary-500);
  }

  .focus-visible\:outline-primary-600:focus-visible {
    outline-color: var(--color-primary-600);
  }

  /* has-[:checked] variants for custom checkbox/radio styling */
  .has-\[\:checked\]\:border-primary:has(:checked) {
    border-color: var(--color-primary-500);
  }

  .has-\[\:checked\]\:bg-primary\/10:has(:checked) {
    background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent);
  }

  .group-has-\[\:checked\]\:border-primary:is(:where(.group):has(:checked) *) {
    border-color: var(--color-primary-500);
  }

  .group-has-\[\:checked\]\:bg-primary:is(:where(.group):has(:checked) *) {
    background-color: var(--color-primary-500);
  }

  /* peer-checked variants for primary colors */
  .peer-checked\:text-primary:is(:where(.peer):checked ~ *) {
    color: var(--color-primary-500);
  }

  /* Hero Animation Classes */
  .fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
  }

  .animation-delay-150 {
    transition-delay: 150ms;
  }

  .animation-delay-300 {
    transition-delay: 300ms;
  }

  .animation-delay-450 {
    transition-delay: 450ms;
  }

  .animation-delay-600 {
    transition-delay: 600ms;
  }

  .animation-delay-750 {
    transition-delay: 750ms;
  }

  .animation-delay-900 {
    transition-delay: 900ms;
  }

  /* Fade in from left for card elements */
  .fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
  }

  /* Fade in from right for alternating elements */
  .fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fade-in-right.animate {
    opacity: 1;
    transform: translateX(0);
  }

  /* Scale animation for special elements */
  .fade-in-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fade-in-scale.animate {
    opacity: 1;
    transform: scale(1);
  }

  /* Reset states for re-triggering animations */
  .fade-in-up.reset,
  .fade-in-left.reset,
  .fade-in-right.reset,
  .fade-in-scale.reset {
    opacity: 0;
    transition-duration: 0.3s; /* Faster reset transition */
  }

  .fade-in-up.reset {
    transform: translateY(20px);
  }

  .fade-in-left.reset {
    transform: translateX(-30px);
  }

  .fade-in-right.reset {
    transform: translateX(30px);
  }

  .fade-in-scale.reset {
    transform: scale(0.95);
  }

  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .fade-in-scale,
    .fade-in-up.reset,
    .fade-in-left.reset,
    .fade-in-right.reset,
    .fade-in-scale.reset {
      transition: none;
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1);
    }
  }
}