:root {
  --teal: #1aa5b8;
  --leaf: #0b5c69;
  --leaf-deep: #083f48;
  --chili: #d7262e;
  --broth: #f2b53a;
  --rice: #f6f7f7;
  --ink: #141c1e;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: #ffffff;
}

/* Fail-safe scroll reveal animation */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Custom scrollbars for sticky category bar */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Subtle pattern for Vietnamese warm atmosphere */
.bg-pho-pattern {
  background-color: #083f48;
  background-image: radial-gradient(rgba(26, 165, 184, 0.18) 1px, transparent 0);
  background-size: 24px 24px;
}

.hero-pattern {
  background-color: #1aa5b8;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1.2px, transparent 0);
  background-size: 20px 20px;
}

/* Pulsing Open dot */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}
.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background-color: currentColor;
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Focus outline */
:focus-visible {
  outline: 3px solid var(--broth);
  outline-offset: 2px;
  border-radius: 6px;
}