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

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

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

.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-[#111] dark:backdrop-blur-sm;
}

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

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

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

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

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

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

.accent-text {
  @apply text-gold-dark;
  @apply dark:text-gold-light;
}

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

.section-padding {
  @apply py-20 sm:py-32;
}

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

/* ===== Section Glow Backgrounds ===== */

.section-glow {
  position: relative;
}

.section-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
  pointer-events: none;
}

/* ===== Glass Card ===== */

.glass-card {
  @apply rounded-2xl border backdrop-blur-sm transition-all duration-300;
  @apply border-neutral-200/80 bg-white/90;
  @apply dark:border-white/[0.06] dark:bg-white/[0.04];
}

.glass-card:hover {
  @apply dark:border-gold/15 dark:bg-white/[0.06];
}

/* ===== Photo Filter ===== */

.photo-filter {
  filter: saturate(0.7) sepia(0.15) brightness(0.95) contrast(1.05);
}

:is(.dark) .photo-filter {
  filter: saturate(0.6) sepia(0.2) brightness(0.9) contrast(1.1);
}

/* ===== Custom Scrollbar ===== */

.styled-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 110, 0.25) transparent;
}

.styled-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.styled-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.styled-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 110, 0.25);
  border-radius: 4px;
}

.styled-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 169, 110, 0.4);
}
