/* ===== Surfaces ===== */

.surface-base {
  @apply bg-neutral-50 text-neutral-900;
  @apply dark:bg-[#050505] dark:text-neutral-50;
}

.surface-muted {
  @apply bg-neutral-100;
  @apply dark:bg-[#0a0a0a];
}

.surface-glass {
  @apply bg-white/70 backdrop-blur-xl;
  @apply dark:bg-black/40 dark:backdrop-blur-xl;
}

.surface-card {
  @apply bg-white/80 backdrop-blur-sm;
  @apply dark:bg-white/[0.03] dark:backdrop-blur-sm;
}

/* ===== Borders ===== */

.theme-border {
  @apply border-neutral-200;
  @apply dark:border-white/[0.06];
}

/* ===== Text ===== */

.heading-text {
  @apply text-neutral-900;
  @apply dark:text-white;
}

.body-text {
  @apply text-neutral-600;
  @apply dark:text-neutral-400;
}

.muted-text {
  @apply text-neutral-500;
  @apply dark:text-neutral-500;
}

.accent-text {
  @apply text-rose-600;
  @apply dark:text-rose-400;
}

/* ===== Layout ===== */

.section-padding {
  @apply py-16 sm:py-24;
}

.section-container {
  @apply mx-auto max-w-6xl px-6 sm:px-8;
}
