:root {
  /* App */
  --brand-base: #2ec4b6;
  --brand-light: #0e9594;
  --brand-dark: #127475;

  /* Utilities */
  --silver-base: #6b7280;
  --silver-light: #eef0f2;
  --silver-dark: #1d1d1f; 

  /* Backgrounds */
  --bg-theme: #ffffff;
  --bgset1-theme: #fefefe;
  --bgset2-theme: #f8fafc;

  /* Text */
  --muted-gray: #6b7280;
  --hero-text: #0a2540;

  /* Blue */
  --blue-100: #bef4fc;
  --blue-200: #9decf9;
  --accent-blue: #38bdf8;
  --accent-blue-dark: #0ea5e9;
  --accent-blue-soft: rgba(56, 189, 248, 0.25);

  /* Purple */
  --purple-100: #bbbcef;
  --purple-200: #c7b3f6;
  --accent-purple: #a78bfa;
  --accent-purple-dark: #7c3aed;
  --accent-purple-soft: rgba(167, 139, 250, 0.25);

  /* Green */
  --green-100: #73c993;
  --green-200: #16a34a;
  --accent-green: #4ade80;
  --accent-green-dark: #16a34a;
  --accent-green-soft: rgba(74, 222, 128, 0.25);

  /* Orange */
  --accent-orange: #fb923c;
  --accent-orange-dark: #f97316;
  --accent-orange-soft: rgba(251, 146, 60, 0.25);

  /* Accent Teal */
  --accent-teal: #06b6d4;
  --accent-teal-dark: #0891b2;
  --accent-teal-soft: rgba(6, 182, 212, 0.35);
}

#scroll-indicator {
  position: fixed;
  right: 1.5rem;
  bottom: 2.5rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1050;
  transition: opacity 0.3s ease;
}

#scroll-indicator img {
  width: 1.4rem;
  height: 1.4rem;
}

#scroll-indicator.hide {
  opacity: 0;
  pointer-events: none;
}