*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-on-surface);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  max-width: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-bubble-cyan);
  color: var(--color-white);
}

::placeholder {
  color: #8c9ba5;
  opacity: 0.85;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

.material-symbols-outlined.outline-only {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.bg-pattern {
  background-image: radial-gradient(#2CC4D9 2px, transparent 2px), radial-gradient(#fd6989 2px, transparent 2px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  opacity: 0.1;
}

.cosmic-overlay {
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(168, 131, 255, 0.12) 0%, transparent 25%),
    radial-gradient(circle at 90% 80%, rgba(44, 196, 217, 0.12) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(253, 105, 137, 0.08) 0%, transparent 40%);
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.text-outline-navy {
  -webkit-text-stroke: 1.5px var(--color-deep-navy);
  color: var(--color-white);
  text-shadow: 3px 3px 0px var(--color-deep-navy);
}

@media (min-width: 768px) {
  .text-outline-navy {
    -webkit-text-stroke: 2.5px var(--color-deep-navy);
    text-shadow: 4px 4px 0px var(--color-deep-navy);
  }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.touch-pan-x {
  touch-action: pan-x;
  scroll-snap-type: x mandatory;
}

.touch-snap-start {
  scroll-snap-align: start;
}