:root {
  color-scheme: light;

  --brand-primary: #f967cf;
  --brand-primary-dark: #d94bb0;
  --brand-accent: #f965d0;
  --brand-accent-soft: #fdf0fa;
  --brand-bg-light: #f8f5f7;
  --brand-surface: #f1f3fb;
  --brand-text: #16203b;
  --brand-text-muted: #9ca3af;
  --brand-text-dark: #1f2937;

  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-dark);
  --accent: var(--brand-accent);
  --accent-soft: var(--brand-accent-soft);
  --background-light: var(--brand-bg-light);
  --surface-gray: var(--brand-surface);
  --text-navy: var(--brand-text);
  --text-dark: var(--brand-text-dark);
  --text-light: var(--brand-text-muted);

  --font-body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--brand-text);
}

::selection {
  background-color: var(--brand-primary);
  color: var(--brand-text);
}

::-moz-selection {
  background-color: var(--brand-primary);
  color: var(--brand-text);
}

.text-primary {
  color: var(--brand-primary) !important;
}

.bg-primary {
  background-color: var(--brand-primary) !important;
}

.border-primary {
  border-color: var(--brand-primary) !important;
}

.hover\:bg-primary-dark:hover {
  background-color: var(--brand-primary-dark) !important;
}

.bg-primary\/5 {
  background-color: rgba(249, 103, 207, 0.05) !important;
}

.bg-primary\/10 {
  background-color: rgba(249, 103, 207, 0.1) !important;
}

.border-primary\/10 {
  border-color: rgba(249, 103, 207, 0.1) !important;
}

.border-primary\/20 {
  border-color: rgba(249, 103, 207, 0.2) !important;
}

.border-primary\/40 {
  border-color: rgba(249, 103, 207, 0.4) !important;
}

.bg-accent-soft {
  background-color: var(--brand-accent-soft) !important;
}

.border-gray-300 {
  border-color: #9ca3af !important;
}

.growth-loop-dark {
  background-color: var(--brand-text);
}

.display-block {
  display: block;
}

.overlay-radial-lighten {
  background: radial-gradient(
    circle,
    rgba(248, 245, 247, 0) 50%,
    rgba(248, 245, 247, 0.85) 100%
  );
  mix-blend-mode: lighten;
}

.spin-duration-10s {
  animation-duration: 10s;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #f967cf;
  outline-offset: 2px;
}

.iti,
.iti__tel-input {
  width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .animate-fade-in {
    animation: fadeIn 600ms ease-out both;
    will-change: opacity;
  }

  .animate-fade-up {
    animation: fadeUp 700ms ease-out both;
    will-change: opacity, transform;
  }

  .stagger-1 {
    animation-delay: 80ms;
  }

  .stagger-2 {
    animation-delay: 160ms;
  }

  .stagger-3 {
    animation-delay: 240ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animate-fade-in,
  .animate-fade-up {
    animation: none !important;
  }
}