:root {
 
/* Radius Variables */
--radius-sm: 2px;
--radius-base: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 100%;


/* Shadow Variables */
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadow-base: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
--shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);

 
/* Button Variables */
--button-primary: var(--purple-700);
--button-primary-hover: #611A87;
--button-primary-active: #521373;

--button-primary-light: white;
--button-primary-light-hover: var(--cool-gray-100);
--button-primary-light-active: var(--cool-gray-200);

}

/* Shadow Classes */
.shadow-sm {
 box-shadow: var(--shadow-sm);
}
.shadow-base {
 box-shadow: var(--shadow-base);
}
.shadow-md {
 box-shadow: var(--shadow-md);
}
.shadow-lg {
 box-shadow: var(--shadow-lg);
}
.shadow-xl {
 box-shadow: var(--shadow-xlg);
}
.shadow-2xl {
 box-shadow: var(--shadow-2xl);
}

/* Radius Classes */
.radius-sm {
 border-radius: var(--radius-sm);
}
.radius-base {
 border-radius: var(--radius-base);
}
.radius-md {
 border-radius: var(--radius-md);
}
.radius-lg {
 border-radius: var(--radius-lg);
}
.radius-xl {
 border-radius: var(--radius-xl);
}
.radius-2xl {
 border-radius: var(--radius-2xl);
}
.radius-3xl {
 border-radius: var(--radius-3xl);
}
.radius-full {
 border-radius: var(--radius-full);
}


/* Buttons */

.button {
  border: none;
  border-radius: var(--radius-md);
  color: white;
  padding: .75rem 1rem;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  display: inline-flex;
  font-family: abc-social;
  font-size: var(--size-200);
  font-weight: var(--weight-500);
  cursor: pointer;
  gap: 8px;
}

/* Button Sizes*/
.btn-sm {
 border-radius: var(--radius-base);
 font-size: var(--size-100);
 padding: .5rem .75rem;
}
.btn-lg {
 border-radius: var(--radius-lg);
 font-size: var(--size-300);
 padding: .75rem 1rem;
}

/* Default Primary */
.primary {
 border: 1.5px solid var(--button-primary);
 background: var(--button-primary);
} 
.primary:hover {
 border: 1.5px solid var(--button-primary-hover);
 background: var(--button-primary-hover);
}
.primary:active {
 border: 1.5px solid var(--button-primary-active);
 background: var(--button-primary-active);
}

/* Primary on dark background*/
.primary-light {
 border: 1.5px solid var(--cool-gray-200);
 background: var(--button-primary-light);
 color: var(--cool-gray-700);
} 
.primary-light:hover {
 border: 1.5px solid var(--cool-gray-200);
 background: var(--button-primary-light-hover);
}
.primary-light:active {
 border: 1.5px solid var(--cool-gray-200);
 background: var(--button-primary-light-active);
}


/* Default Secondary */
.secondary {
 background: none;
 color: var(--purple-700);
}
.secondary:hover {
 color: var(--purple-800);
}

/* Secondary on dark background*/
.secondary-light {
 background: none;
 color: white;
}
.secondary-light:hover {
 color: var(--cool-gray-200);
}
.secondary-light:active {
 color: var(--cool-gray-300);
}