@layer base {
  :root {
    --bg-primary: #051F20;
    --bg-secondary: #0B2B26;
    --surface-dark: #163832;
    --surface-interactive: #235347;
    --accent: #8EB69B;
    --text-light: #DAF1DE;
    --soft-ivory: #F5F8F4;
    --text-muted: rgba(218, 241, 222, 0.65);
  }

  body {
    font-family: 'General Sans', 'Satoshi', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-light);
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }
}

/* Hide scrollbars completely for fixed viewport application */
::-webkit-scrollbar {
  display: none;
  width: 0px;
  background: transparent;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: none;
}

/* Smooth glass and surface utility classes */
.glass-panel {
  background: rgba(22, 56, 50, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(142, 182, 155, 0.12);
}

.glass-panel-interactive {
  background: rgba(35, 83, 71, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(142, 182, 155, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-interactive:hover {
  background: rgba(35, 83, 71, 0.65);
  border-color: rgba(142, 182, 155, 0.4);
}

/* Atmospheric subtle glows */
.glow-subtle {
  box-shadow: 0 0 60px -15px rgba(142, 182, 155, 0.15);
}

/* Custom noise texture overlay */
.bg-noise {
  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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}