@layer components {
  /* Layout container with balanced spacing */
  .layout-container {
    @apply max-w-7xl mx-auto;
  }

  /* Card with consistent padding */
  .card {
    @apply bg-white dark:bg-surface-dark-100 rounded-lg shadow;
  }

  /* Table container with proper spacing */
  .table-container {
    @apply overflow-x-auto rounded-lg;
  }

  .table-cell {
    @apply px-3 py-2 lg:px-4 lg:py-3 whitespace-nowrap text-sm text-surface-900 dark:text-surface-dark-900;
  }

  /* Typography with better readability */
  .page-title {
    @apply text-2xl lg:text-3xl font-semibold text-surface-800 dark:text-surface-dark-800;
  }

  .section-title {
    @apply text-lg lg:text-xl font-semibold text-surface-700 dark:text-surface-dark-700;
  }
}