$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-xxl: 1536px;
$color-blue-100: #E0F2FF;
$color-blue-200: #B5DEFF;
$color-blue-300: #78BBFA;
$color-blue-400: #3892F3;
$color-blue-500: #0265DC;
$color-blue-600: #004491;
$color-neutral-0: #ffffff;
$color-neutral-10: #fcfcfc;
$color-neutral-20: #fafafa;
$color-neutral-30: #f7f7f7;
$color-neutral-40: #f5f5f5;
$color-neutral-50: #eeeeee;
$color-neutral-60: #dfe0e1;
$color-neutral-70: #bcbcbd;
$color-neutral-80: #949596;
$color-neutral-90: #737475;
$color-neutral-100: #606162;
$color-neutral-200: #444445;
$color-neutral-300: #2d2e31;
$color-neutral-400: #141414;
$color-neutral-500: #040404;
$color-blue-grey-100: #eaeff2;
$color-blue-grey-200: #d0d8dd;
$color-blue-grey-300: #b4c1c8;
$color-blue-grey-400: #8c9ca5;
$color-blue-grey-500: #6a7a85;
$color-blue-grey-600: #576671;
$color-orange-100: #ffeccc;
$color-orange-200: #fdd291;
$color-orange-300: #ffa037;
$color-orange-400: #e46f00;
$color-orange-500: #b14c00;
$color-orange-600: #7a2f00;
$color-yellow-100: #fff9e2;
$color-yellow-200: #fff0b1;
$color-yellow-300: #ffe278;
$color-yellow-400: #ffc902;
$color-yellow-500: #ffbe00;
$color-yellow-600: #de9500;
$color-green-100: #CEF8E0;
$color-green-200: #89ECBC;
$color-green-300: #49CC93;
$color-green-400: #15A46E;
$color-green-500: #007A4D;
$color-green-600: #005132;
$color-cyan-100: #e3fcff;
$color-cyan-200: #b1f3fa;
$color-cyan-300: #13ceea;
$color-cyan-400: #08bfdf;
$color-cyan-500: #0ca5c0;
$color-cyan-600: #038299;
$color-purple-100: #f1edff;
$color-purple-200: #c1b6f2;
$color-purple-300: #8772e5;
$color-purple-400: #6954c0;
$color-purple-500: #4f3a9e;
$color-purple-600: #422799;
$color-red-100: #ffece9;
$color-red-200: #ffb2a0;
$color-red-300: #ff745f;
$color-red-400: #f94d32;
$color-red-500: #e13212;
$color-red-600: #bf2a00;
$color-magenta-100: #fbeaf5;
$color-magenta-200: #faafe2;
$color-magenta-300: #d949a9;
$color-magenta-400: #b52d88;
$color-magenta-500: #982071;
$color-magenta-600: #7d165b;
$duration: 200ms;
$duration-instant: 0ms;
$duration-fast: 100ms;
$duration-slow: 300ms;
$font-family-base: var(--font-family-base, 'Nunito Sans', sans-serif);
$font-family-display: var(--font-family-display, 'Sofia Pro', SofiaPro, sans-serif);
$font-line-height-base: 1.5;
$font-line-height-display: 1.25;
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-size-100: 0.625rem;
$font-size-200: 0.75rem;
$font-size-300: 0.875rem;
$font-size-400: 1rem;
$font-size-500: 1.25rem;
$font-size-600: 1.5rem;
$font-size-700: 1.75rem;
$font-size-800: 2rem;
$font-size-900: 2.25rem;
$radius-0: 0;
$radius-1: 0.1875rem;
$radius-2: 0.375rem;
$radius-3: 0.5625rem;
$radius-4: 0.75rem;
$radius-5: 0.9375rem;
$radius-6: 1.125rem;
$radius-7: 1.3125rem;
$radius-8: 1.5rem;
$size-0: 0rem;
$size-1: 0.25rem;
$size-2: 0.5rem;
$size-3: 0.75rem;
$size-4: 1rem;
$size-5: 1.25rem;
$size-6: 1.5rem;
$size-7: 1.75rem;
$size-8: 2rem;
$size-9: 2.25rem;
$size-10: 2.5rem;
$size-11: 2.75rem;
$size-12: 3rem;
$size-13: 3.25rem;
$size-14: 3.5rem;
$size-quarter: 0.0625rem;
$size-half: 0.125rem;
$transition-ease: cubic-bezier(.4, 0, .2, 1);
$transition-ease-in: cubic-bezier(.4, 0, 1, 1);
$transition-ease-out: cubic-bezier(0, 0, .4, 1);
$transition-ease-in-out: cubic-bezier(.4, 0, .6, 1);