@layer base {
  body {
    @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 min-h-screen flex flex-col;
  }
  .header {
    @apply bg-white dark:bg-gray-800 shadow-md py-4 mb-8;
  }
  .main-heading {
    @apply text-4xl font-extrabold text-indigo-700 dark:text-indigo-400;
  }
  .sub-heading {
    @apply text-lg text-gray-600 dark:text-gray-300 mt-2;
  }
  .btn-primary {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200;
  }
  .btn-secondary {
    @apply bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200;
  }
  .input-field {
    @apply w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-gray-100;
  }
  .collapsible-section {
    @apply border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm dark:shadow-none bg-white dark:bg-gray-800;
  }
  .collapsible-header {
    @apply flex justify-between items-center p-4 cursor-pointer bg-gray-50 dark:bg-gray-700 rounded-t-xl hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200;
  }
  .collapsible-title {
    @apply text-xl font-semibold text-gray-800 dark:text-gray-100;
  }
  .collapsible-content {
    @apply p-4 border-t border-gray-200 dark:border-gray-700;
  }
  .bmi-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md flex-1;
  }
  .bmi-history-item {
    @apply flex justify-between items-center p-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0;
  }
  .modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden;
  }
  .modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl w-11/12 md:max-w-md;
  }
}