/* ==========================================================================
   WAVE SVG COLOR COMBINATIONS (Light & Dark)
========================================================================== */

.wave-brand g {
  fill: var(--color-brand-600);
}
.dark .wave-brand g {
  fill: var(--color-brand-400);
}

.wave-fill-hero g {
  fill: var(--color-surface-dark);
}

.wave-fill-surface-alt g {
  fill: var(--color-surface-alt);
}
.dark .wave-fill-surface-alt g {
  fill: var(--color-surface-dark-alt);
}
.wave-fill-surface g {
  fill: var(--color-surface);
}
.dark .wave-fill-surface g {
  fill: var(--color-surface-dark);
}

.wave-fill-brand-50 g {
  fill: var(--color-brand-50);
}
.dark .wave-fill-brand-50 g {
  fill: var(--color-surface-dark);
}

.wave-surface g {
  fill: var(--color-on-surface);
}
.dark .wave-surface g {
  fill: var(--color-on-surface-dark);
}

.wave-alt g {
  fill: var(--color-surface-alt);
}
.dark .wave-alt g {
  fill: var(--color-surface-dark-alt);
}

.wave-outline g {
  fill: var(--color-outline-strong);
}
.dark .wave-outline g {
  fill: var(--color-outline-dark-strong);
}

.wave-danger g {
  fill: var(--color-danger);
}
.dark .wave-danger g {
  fill: var(--color-brand-300);
}

.wave-fill-rose g {
  fill: var(--color-brand-50);
}
.dark .wave-fill-rose g {
  fill: var(--color-brand-800);
}

.wave-rose g {
  fill: var(--color-brand-600);
}
.dark .wave-rose g {
  fill: var(--color-brand-300);
}