/**
 * -----------------------------------------
 * COLORS
 * -----------------------------------------
 */
$theme-color__primary-1--100: hsla(251, 72%, 81%, 1);
$theme-color__primary-1--300: hsla(261, 43%, 55%, 1);
$theme-color__primary-1--500: hsla(261, 43%, 45%, 1);
$theme-color__primary-1--700: hsla(251, 42%, 31%, 1);
$theme-color__primary-1--900: hsla(256, 22%, 10%, 1);

$theme-color__nearWhite: hsla(0, 0%, 98%, 1);
$theme-color__offWhite: hsla(0, 0%, 91%, 1);

$color__box-shadow: hsla(0, 0%, 0%, 0.43);

$box-shadow__card: 0 3px 12px rgba(0, 0, 0, 0.23),
  0 3px 12px rgba(0, 0, 0, 0.16);

/**
 * -----------------------------------------
 * ANIMATION
 * -----------------------------------------
 */
$duration__fade-toggle: 0.25s;

$easing__ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easing__ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

/**
 * -----------------------------------------
 * DIMENSIONS
 * -----------------------------------------
 */

/*
 * 180:130 padding ratio to align content aspect ratio with human FOV
 */
$padding__content-box: 0.75em 1.05em;
$padding__content-box--lg: 1.5em 2.1em;

/* This could be a breakpoint in, you know, a real app 😜 */
$min-width__main-content: 40rem;


$width__grid-item: 24rem;
$height__grid-item: $width__grid-item * 0.55;
$margin__grid-item--vertical: 0.5em;
$margin__grid-item--horizontal: 0.75em;
