@import url('./colors.css');
@import url('./base/components.css');
@import url('./base/effects.css');
@import url('./layout/sections.css');

body {
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-body);
  position: relative;
}

/* Hiệu ứng Noise Texture siêu mờ để tạo chiều sâu vật liệu */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Lớp Vignette toàn cục để tập trung ánh sáng vào trung tâm */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

.font-headline {
  font-family: var(--font-headline) !important;
}

.font-body,
.font-label {
  font-family: var(--font-body) !important;
}

.text-on-surface-variant {
  color: var(--on-surface-variant) !important;
}

.text-primary,
.text-primary-container {
  color: var(--primary) !important;
}

.text-secondary,
.text-secondary-container {
  color: var(--secondary) !important;
}

.bg-primary,
.bg-primary-container {
  background-color: var(--primary) !important;
}

.bg-secondary,
.bg-secondary-container {
  background-color: var(--secondary) !important;
}

.border-primary,
.border-primary-container {
  border-color: var(--primary) !important;
}

.border-secondary,
.border-secondary-container {
  border-color: var(--secondary) !important;
}

.shopee-gradient,
.bg-gradient-to-r.from-\[\#FF4D2D\].to-\[\#FE2C55\] {
  background-image: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
}

.mobile-menu-link.active,
.nav-link.active,
.nav-link:hover {
  color: var(--secondary-fixed-dim) !important;
}

/* 
 * Stacking Cards Effect
 * top: min(0px, 100vh - 100%) giúp khóa dính các khối. Nếu khối dài hơn màn hình, nó sẽ khóa dính ở dưới đáy để khách kịp đọc.
 */
.stack-section {
  position: sticky;
  top: min(0px, 100vh - 100%);
  z-index: 0;
  will-change: transform;
}