/* Meal Cards - Blue theme with card base style */
@utility meal-card {
  @layer components {
    @apply bg-white rounded-lg shadow-md mb-4;
  }
}

@utility meal-card__header {
  @layer components {
    @apply pl-6 pr-3 py-4 border-b border-blue-200 bg-blue-50;
  }
}

@utility meal-card__body {
  @layer components {
    @apply pl-6;
  }
}

/* Dish Cards - Green theme with card base style */
@utility dish-card {
  @layer components {
    @apply bg-white rounded-lg shadow-md mb-4;
  }
}

@utility dish-card__header {
  @layer components {
    @apply pl-6 pr-3 py-4 border-b border-green-200 bg-green-50;
  }
}

@utility dish-card__body {
  @layer components {
    @apply pl-6;
  }
}

/* Meal Type Badges */
@utility meal-type-badge {
  @layer components {
    @apply inline-block px-2 py-1 text-xs font-bold rounded uppercase;
  }
}

@utility meal-type-badge--breakfast {
  @layer components {
    @apply bg-yellow-200 text-yellow-800;
  }
}

@utility meal-type-badge--lunch {
  @layer components {
    @apply bg-blue-200 text-blue-800;
  }
}

@utility meal-type-badge--dinner {
  @layer components {
    @apply bg-red-100 text-red-700;
  }
}

@utility meal-type-badge--snack {
  @layer components {
    @apply bg-yellow-100 text-yellow-700;
  }
}

@utility meal-type-badge--other {
  @layer components {
    @apply bg-gray-200 text-gray-800;
  }
}

/* Dish Type Badges */
@utility dish-type-badge {
  @layer components {
    @apply inline-block px-2 py-1 text-xs font-bold rounded uppercase;
  }
}

@utility dish-type-badge--main {
  @layer components {
    @apply bg-green-200 text-green-800;
  }
}

@utility dish-type-badge--side {
  @layer components {
    @apply bg-blue-200 text-blue-800;
  }
}

@utility dish-type-badge--dessert {
  @layer components {
    @apply bg-red-200 text-red-800;
  }
}

@utility dish-type-badge--other {
  @layer components {
    @apply bg-gray-200 text-gray-800;
  }
}

/* Form: Group Selection */
@utility group-option {
  @layer components {
    @apply flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors;
  }
}

@utility group-option--meal {
  @layer components {
    @apply border-blue-200 hover:bg-blue-50;
  }
}

@utility group-option--dish {
  @layer components {
    @apply border-green-200 hover:bg-green-50;
  }
}

@utility group-option__label {
  @layer components {
    @apply text-gray-900 font-medium;
  }
}

/* Form: Pill Selection */
@utility pill-option {
  @layer components {
    @apply inline-flex items-center px-3 py-2 mr-2 mb-2 rounded-full border-2 border-gray-300 text-sm font-medium text-gray-700 cursor-pointer transition-all hover:border-blue-400 hover:bg-blue-50;
  }
}

@utility pill-option__label {
  @layer components {
    @apply transition-colors;
  }
}