@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-ExtraLight.woff2') format('woff2');
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-Light.woff2') format('woff2');
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-Regular.woff2') format('woff2');
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-Medium.woff2') format('woff2');
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-Bold.woff2') format('woff2');
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-ExtraBold.woff2') format('woff2');
}

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Cairo-Black.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/GeistMono[wght].woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/GeistMono-Italic[wght].woff2') format('woff2');
}

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterVariable-Italic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-Thin.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-ThinItalic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-ExtraLight.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-ExtraLightItalic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-Light.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-LightItalic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-Italic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-MediumItalic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-Bold.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-BoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-ExtraBold.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-ExtraBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-Black.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/Inter-BlackItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-Thin.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-ThinItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-ExtraLight.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-ExtraLightItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-Light.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-LightItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-Regular.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-Italic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-Medium.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-MediumItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-Bold.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-BoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-ExtraBold.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-ExtraBoldItalic.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-Black.woff2') format('woff2');
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('https://fonts.youcan.shop/fonts/InterDisplay-BlackItalic.woff2') format('woff2');
}

@font-feature-values InterVariable {
  @character-variant {
    cv01: 1;
    cv02: 2;
    cv03: 3;
    cv04: 4;
    cv05: 5;
    cv06: 6;
    cv07: 7;
    cv08: 8;
    cv09: 9;
    cv10: 10;
    cv11: 11;
    cv12: 12;
    cv13: 13;
    alt-1: 1; /* Alternate one */
    alt-3: 9; /* Flat-top three */
    open-4: 2; /* Open four */
    open-6: 3; /* Open six */
    open-9: 4; /* Open nine */
    lc-l-with-tail: 5; /* Lower-case L with tail */
    simplified-u: 6; /* Simplified u */
    alt-double-s: 7; /* Alternate German double s */
    uc-i-with-serif: 8; /* Upper-case i with serif */
    uc-g-with-spur: 10; /* Capital G with spur */
    single-story-a: 11; /* Single-story a */
    compact-lc-f: 12; /* Compact f */
    compact-lc-t: 13; /* Compact t */
  }

  @styleset {
    ss01: 1;
    ss02: 2;
    ss03: 3;
    ss04: 4;
    ss05: 5;
    ss06: 6;
    ss07: 7;
    ss08: 8;
    open-digits: 1; /* Open digits */
    disambiguation: 2; /* Disambiguation (with zero) */
    disambiguation-except-zero: 4; /* Disambiguation (no zero) */
    round-quotes-and-commas: 3; /* Round quotes & commas */
    square-punctuation: 7; /* Square punctuation */
    square-quotes: 8; /* Square quotes */
    circled-characters: 5; /* Circled characters */
    squared-characters: 6; /* Squared characters */
  }
}

@font-feature-values Inter {
  @character-variant {
    cv01: 1;
    cv02: 2;
    cv03: 3;
    cv04: 4;
    cv05: 5;
    cv06: 6;
    cv07: 7;
    cv08: 8;
    cv09: 9;
    cv10: 10;
    cv11: 11;
    cv12: 12;
    cv13: 13;
    alt-1: 1; /* Alternate one */
    alt-3: 9; /* Flat-top three */
    open-4: 2; /* Open four */
    open-6: 3; /* Open six */
    open-9: 4; /* Open nine */
    lc-l-with-tail: 5; /* Lower-case L with tail */
    simplified-u: 6; /* Simplified u */
    alt-double-s: 7; /* Alternate German double s */
    uc-i-with-serif: 8; /* Upper-case i with serif */
    uc-g-with-spur: 10; /* Capital G with spur */
    single-story-a: 11; /* Single-story a */
    compact-lc-f: 12; /* Compact f */
    compact-lc-t: 13; /* Compact t */
  }

  @styleset {
    ss01: 1;
    ss02: 2;
    ss03: 3;
    ss04: 4;
    ss05: 5;
    ss06: 6;
    ss07: 7;
    ss08: 8;
    open-digits: 1; /* Open digits */
    disambiguation: 2; /* Disambiguation (with zero) */
    disambiguation-except-zero: 4; /* Disambiguation (no zero) */
    round-quotes-and-commas: 3; /* Round quotes & commas */
    square-punctuation: 7; /* Square punctuation */
    square-quotes: 8; /* Square quotes */
    circled-characters: 5; /* Circled characters */
    squared-characters: 6; /* Squared characters */
  }
}

@font-feature-values InterDisplay {
  @character-variant {
    cv01: 1;
    cv02: 2;
    cv03: 3;
    cv04: 4;
    cv05: 5;
    cv06: 6;
    cv07: 7;
    cv08: 8;
    cv09: 9;
    cv10: 10;
    cv11: 11;
    cv12: 12;
    cv13: 13;
    alt-1: 1; /* Alternate one */
    alt-3: 9; /* Flat-top three */
    open-4: 2; /* Open four */
    open-6: 3; /* Open six */
    open-9: 4; /* Open nine */
    lc-l-with-tail: 5; /* Lower-case L with tail */
    simplified-u: 6; /* Simplified u */
    alt-double-s: 7; /* Alternate German double s */
    uc-i-with-serif: 8; /* Upper-case i with serif */
    uc-g-with-spur: 10; /* Capital G with spur */
    single-story-a: 11; /* Single-story a */
    compact-lc-f: 12; /* Compact f */
    compact-lc-t: 13; /* Compact t */
  }

  @styleset {
    ss01: 1;
    ss02: 2;
    ss03: 3;
    ss04: 4;
    ss05: 5;
    ss06: 6;
    ss07: 7;
    ss08: 8;
    open-digits: 1; /* Open digits */
    disambiguation: 2; /* Disambiguation (with zero) */
    disambiguation-except-zero: 4; /* Disambiguation (no zero) */
    round-quotes-and-commas: 3; /* Round quotes & commas */
    square-punctuation: 7; /* Square punctuation */
    square-quotes: 8; /* Square quotes */
    circled-characters: 5; /* Circled characters */
    squared-characters: 6; /* Squared characters */
  }
}
@keyframes celeste-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes celeste-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes celeste-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes celeste-zoom-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes celeste-spin-in {
  from {
    opacity: 0;
    transform: rotate(-30deg);
  }
}

@keyframes celeste-spin-out {
  to {
    opacity: 0;
    transform: rotate(30deg);
  }
}

@keyframes celeste-slide-in-from-top {
  from {
    transform: translateY(-100%);
  }
}

@keyframes celeste-slide-in-from-bottom {
  from {
    transform: translateY(100%);
  }
}

@keyframes celeste-slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
}

@keyframes celeste-slide-in-from-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes celeste-slide-out-to-top {
  to {
    transform: translateY(-100%);
  }
}

@keyframes celeste-slide-out-to-bottom {
  to {
    transform: translateY(100%);
  }
}

@keyframes celeste-slide-out-to-left {
  to {
    transform: translateX(-100%);
  }
}

@keyframes celeste-slide-out-to-right {
  to {
    transform: translateX(100%);
  }
}

@keyframes celeste-bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes celeste-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes celeste-ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes celeste-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

@keyframes celeste-swing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
}

@keyframes celeste-wiggle {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

@keyframes celeste-flip {
  from {
    transform: perspective(400px) rotateY(-180deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
}

@keyframes celeste-flip-out {
  from {
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes celeste-accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--reka-accordion-content-height);
  }
}

@keyframes celeste-accordion-up {
  from {
    height: var(--reka-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes celeste-collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--reka-collapsible-content-height);
  }
}

@keyframes celeste-collapsible-up {
  from {
    height: var(--reka-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes celeste-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 0.95) rotate(0);
  }
}

@keyframes celeste-exit {
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 0.95) rotate(0);
  }
}

@keyframes celeste-scale-in {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes celeste-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes celeste-rotate-in {
  from {
    opacity: 0;
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes celeste-rotate-out {
  from {
    opacity: 1;
    transform: rotate(0);
  }
  to {
    opacity: 0;
    transform: rotate(200deg);
  }
}

@keyframes celeste-slide-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 100%;
    opacity: 1;
  }
}

@keyframes celeste-slide-up {
  from {
    height: 100%;
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@keyframes celeste-slide-left {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

@keyframes celeste-slide-right {
  from {
    width: 100%;
    opacity: 1;
  }
  to {
    width: 0;
    opacity: 0;
  }
}

@keyframes celeste-glow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
}

@keyframes celeste-flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes celeste-rubber-band {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85);
  }
  65% {
    transform: scaleX(0.95) scaleY(1.05);
  }
  75% {
    transform: scaleX(1.05) scaleY(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes celeste-jello {
  0%,
  100% {
    transform: skewX(0deg) skewY(0deg);
  }
  30% {
    transform: skewX(25deg) skewY(-25deg);
  }
  40% {
    transform: skewX(-15deg) skewY(15deg);
  }
  50% {
    transform: skewX(15deg) skewY(-15deg);
  }
  65% {
    transform: skewX(-5deg) skewY(5deg);
  }
  75% {
    transform: skewX(5deg) skewY(-5deg);
  }
}

@keyframes celeste-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  14%,
  42% {
    transform: scale(1.3);
  }
  28%,
  70% {
    transform: scale(1);
  }
}

// Do not edit directly, this file was auto-generated.

$animation-extra-fast: 100ms;
$animation-fast: 200ms;
$animation-normal: 300ms;
$animation-slow: 400ms;
$animation-extra-slow: 500ms;
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;
$color-white-alpha-24: rgba(255, 255, 255, 0.24);
$color-white-alpha-16: rgba(255, 255, 255, 0.16);
$color-white-alpha-10: rgba(255, 255, 255, 0.1);
$color-black-alpha-24: rgba(23, 23, 23, 0.24);
$color-black-alpha-16: rgba(23, 23, 23, 0.16);
$color-black-alpha-10: rgba(23, 23, 23, 0.1);
$color-neutral-0: #ffffff;
$color-neutral-50: #f7f7f7;
$color-neutral-100: #f5f5f5;
$color-neutral-200: #ebebeb;
$color-neutral-300: #d1d1d1;
$color-neutral-400: #a3a3a3;
$color-neutral-500: #7b7b7b;
$color-neutral-600: #5c5c5c;
$color-neutral-700: #333333;
$color-neutral-800: #292929;
$color-neutral-900: #1c1c1c;
$color-neutral-950: #171717;
$color-neutral-alpha-10: rgba(163, 163, 163, 0.1);
$color-neutral-alpha-16: rgba(163, 163, 163, 0.16);
$color-neutral-alpha-24: rgba(163, 163, 163, 0.24);
$color-red-50: #ffebec;
$color-red-100: #ffd5d8;
$color-red-200: #ffc0c5;
$color-red-300: #ff97a0;
$color-red-400: #ff6875;
$color-red-500: #fb3748;
$color-red-600: #e93544;
$color-red-700: #d02533;
$color-red-800: #ad1f2b;
$color-red-900: #8b1822;
$color-red-950: #681219;
$color-red-alpha-10: rgba(251, 55, 72, 0.1);
$color-red-alpha-16: rgba(251, 55, 72, 0.16);
$color-red-alpha-24: rgba(251, 55, 72, 0.24);
$color-orange-50: #fff1eb;
$color-orange-100: #ffe3d5;
$color-orange-200: #ffd5c0;
$color-orange-300: #ffba97;
$color-orange-400: #ff9a68;
$color-orange-500: #ff8447;
$color-orange-600: #e97135;
$color-orange-700: #d05e25;
$color-orange-800: #ad4e1f;
$color-orange-900: #8b3e18;
$color-orange-950: #682f12;
$color-orange-alpha-10: rgba(255, 145, 71, 0.1);
$color-orange-alpha-16: rgba(255, 145, 71, 0.16);
$color-orange-alpha-24: rgba(255, 145, 71, 0.24);
$color-yellow-50: #fffaeb;
$color-yellow-100: #ffefcc;
$color-yellow-200: #ffecc0;
$color-yellow-300: #ffe097;
$color-yellow-400: #ffd268;
$color-yellow-500: #f6b51e;
$color-yellow-600: #e6a819;
$color-yellow-700: #c99a2c;
$color-yellow-800: #a78025;
$color-yellow-900: #86661d;
$color-yellow-950: #624c18;
$color-yellow-alpha-10: rgba(251, 198, 75, 0.1);
$color-yellow-alpha-16: rgba(251, 198, 75, 0.16);
$color-yellow-alpha-24: rgba(251, 198, 75, 0.24);
$color-green-50: #e0faec;
$color-green-100: #d0fbe9;
$color-green-200: #c2f5da;
$color-green-300: #84ebb4;
$color-green-400: #3ee089;
$color-green-500: #1fc16b;
$color-green-600: #1daf61;
$color-green-700: #178c4e;
$color-green-800: #1a7544;
$color-green-900: #16643b;
$color-green-950: #0b4627;
$color-green-alpha-10: rgba(31, 193, 107, 0.1);
$color-green-alpha-16: rgba(31, 193, 107, 0.16);
$color-green-alpha-24: rgba(31, 193, 107, 0.24);
$color-teal-50: #e4fbf8;
$color-teal-100: #d0fbf5;
$color-teal-200: #c2f5ee;
$color-teal-300: #84ebdd;
$color-teal-400: #3fdec9;
$color-teal-500: #22d3bb;
$color-teal-600: #1daf9c;
$color-teal-700: #178c7d;
$color-teal-800: #1a7569;
$color-teal-900: #16645a;
$color-teal-950: #0b463e;
$color-teal-alpha-10: rgba(34, 211, 187, 0.1);
$color-teal-alpha-16: rgba(34, 211, 187, 0.16);
$color-teal-alpha-24: rgba(34, 211, 187, 0.24);
$color-sky-50: #ebf8ff;
$color-sky-100: #d5f1ff;
$color-sky-200: #c0eaff;
$color-sky-300: #97dcff;
$color-sky-400: #68cdff;
$color-sky-500: #47c2ff;
$color-sky-600: #35ade9;
$color-sky-700: #2597d0;
$color-sky-800: #1f7ead;
$color-sky-900: #18658b;
$color-sky-950: #124b68;
$color-sky-alpha-10: rgba(71, 194, 255, 0.1);
$color-sky-alpha-16: rgba(71, 194, 255, 0.16);
$color-sky-alpha-24: rgba(71, 194, 255, 0.24);
$color-blue-50: #ebf1ff;
$color-blue-100: #d5e2ff;
$color-blue-200: #c0d5ff;
$color-blue-300: #97baff;
$color-blue-400: #6895ff;
$color-blue-500: #335cff;
$color-blue-600: #3559e9;
$color-blue-700: #2547d0;
$color-blue-800: #1f3bad;
$color-blue-900: #182f8b;
$color-blue-950: #122368;
$color-blue-alpha-10: rgba(71, 108, 255, 0.1);
$color-blue-alpha-16: rgba(71, 108, 255, 0.16);
$color-blue-alpha-24: rgba(71, 108, 255, 0.24);
$color-purple-50: #efebff;
$color-purple-100: #dcd5ff;
$color-purple-200: #cac0ff;
$color-purple-300: #a897ff;
$color-purple-400: #8c71f6;
$color-purple-500: #7d52f4;
$color-purple-600: #693ee0;
$color-purple-700: #5b2cc9;
$color-purple-800: #4c25a7;
$color-purple-900: #3d1d86;
$color-purple-950: #351a75;
$color-purple-alpha-10: rgba(120, 77, 239, 0.1);
$color-purple-alpha-16: rgba(120, 77, 239, 0.16);
$color-purple-alpha-24: rgba(120, 77, 239, 0.24);
$color-pink-50: #ffebf4;
$color-pink-100: #ffd5ea;
$color-pink-200: #ffc0df;
$color-pink-300: #ff97cb;
$color-pink-400: #ff68b3;
$color-pink-500: #fb4ba3;
$color-pink-600: #e9358f;
$color-pink-700: #d0257a;
$color-pink-800: #ad1f66;
$color-pink-900: #8b1852;
$color-pink-950: #68123d;
$color-pink-alpha-10: rgba(251, 75, 163, 0.1);
$color-pink-alpha-16: rgba(251, 75, 163, 0.16);
$color-pink-alpha-24: rgba(251, 75, 163, 0.24);
$color-brand-50: #ffebf4;
$color-brand-100: #ffd6e9;
$color-brand-200: #ffc2dd;
$color-brand-300: #ff99c7;
$color-brand-400: #ff66ab;
$color-brand-500: #e1116f;
$color-brand-600: #cb0f64;
$color-brand-700: #b40e59;
$color-brand-800: #9e0c4e;
$color-brand-900: #870a43;
$color-brand-950: #681239;
$color-static-white: #ffffff;
$color-static-black: #171717;
$color-bg-white-0: #ffffff;
$color-bg-weak-50: #f7f7f7;
$color-bg-strong-950: #171717;
$color-bg-surface-800: #292929;
$color-bg-soft-200: #ebebeb;
$color-bg-sub-300: #d1d1d1;
$color-state-faded-light: #ebebeb;
$color-state-faded-base: #7b7b7b;
$color-state-faded-dark: #292929;
$color-state-faded-lighter: #f5f5f5;
$color-state-error-base: #fb3748;
$color-state-error-light: #ffc0c5;
$color-state-error-dark: #681219;
$color-state-error-lighter: #ffebec;
$color-state-warning-dark: #682f12;
$color-state-warning-base: #ff8447;
$color-state-warning-light: #ffd5c0;
$color-state-warning-lighter: #fff1eb;
$color-state-information-dark: #122368;
$color-state-information-base: #335cff;
$color-state-information-light: #c0d5ff;
$color-state-information-lighter: #ebf1ff;
$color-state-success-dark: #0b4627;
$color-state-success-base: #1fc16b;
$color-state-success-light: #c2f5da;
$color-state-success-lighter: #e0faec;
$color-state-away-dark: #624c18;
$color-state-away-base: #f6b51e;
$color-state-away-light: #ffecc0;
$color-state-away-lighter: #fffaeb;
$color-state-feature-dark: #351a75;
$color-state-feature-base: #7d52f4;
$color-state-feature-light: #cac0ff;
$color-state-feature-lighter: #efebff;
$color-state-verified-dark: #124b68;
$color-state-verified-base: #47c2ff;
$color-state-verified-light: #c0eaff;
$color-state-verified-lighter: #ebf8ff;
$color-state-highlighted-dark: #68123d;
$color-state-highlighted-base: #fb4ba3;
$color-state-highlighted-light: #ffc0df;
$color-state-highlighted-lighter: #ffebf4;
$color-state-stable-dark: #0b463e;
$color-state-stable-base: #22d3bb;
$color-state-stable-light: #c2f5ee;
$color-state-stable-lighter: #e4fbf8;
$color-text-strong-950: #171717;
$color-text-sub-600: #5c5c5c;
$color-text-disabled-300: #d1d1d1;
$color-text-white-0: #ffffff;
$color-text-soft-400: #a3a3a3;
$color-stroke-soft-200: #ebebeb;
$color-stroke-strong-950: #171717;
$color-stroke-white-0: #ffffff;
$color-stroke-sub-300: #d1d1d1;
$color-icon-sub-600: #5c5c5c;
$color-icon-strong-950: #171717;
$color-icon-soft-400: #a3a3a3;
$color-icon-disabled-300: #d1d1d1;
$color-icon-white-0: #ffffff;
$color-social-apple: #000000;
$color-social-twitter: #010101;
$color-social-github: #24292f;
$color-social-notion: #1e2226;
$color-social-tidal: #000000;
$color-social-amazon: #353e47;
$color-social-zendesk: #16140d;
$color-illustration-strong-400: #a3a3a3;
$color-illustration-sub-300: #d1d1d1;
$color-illustration-soft-200: #ebebeb;
$color-illustration-weak-100: #f5f5f5;
$color-illustration-white-0: #ffffff;
$color-overlay-overlay: rgba(2, 13, 23, 0.24);
$color-primary-base: #e1116f;
$color-primary-darker: #b40e59;
$color-primary-alpha-10: rgba(251, 75, 163, 0.1);
$color-primary-alpha-16: rgba(251, 75, 163, 0.16);
$color-primary-dark: #cb0f64;
$color-primary-alpha-24: rgba(251, 75, 163, 0.24);
$radius-4: 4px;
$radius-6: 6px;
$radius-8: 8px;
$radius-10: 10px;
$radius-12: 12px;
$radius-16: 16px;
$radius-20: 20px;
$radius-24: 24px;
$radius-full: 999px;
$shadow-regular-xs: 0 1px 2px 0 #0a0d1408;
$shadow-regular-md: 0 16px 32px -12px #0e121b1a;
$shadow-buttons-primary-focus: 0 0 0 2px #ffffff, 0 0 0 4px #fb4ba31a;
$shadow-buttons-important-focus: 0 0 0 2px #ffffff, 0 0 0 4px #99a0ae29;
$shadow-buttons-error-focus: 0 0 0 2px #ffffff, 0 0 0 4px #fb37481a;
$shadow-fancy-buttons-neutral: 0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628;
$shadow-fancy-buttons-primary: 0 1px 2px 0 #0e121b3d, 0 0 0 1px #e1116f;
$shadow-fancy-buttons-error: 0 1px 2px 0 #0e121b3d, 0 0 0 1px #fb3748;
$shadow-fancy-buttons-stroke: 0 1px 3px 0 #0e121b1f, 0 0 0 1px #e1e4ea;
$shadow-toggle-switch: 0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08;
$spacing-0: 0;
$spacing-2: 2px;
$spacing-4: 4px;
$spacing-6: 6px;
$spacing-8: 8px;
$spacing-10: 10px;
$spacing-12: 12px;
$spacing-14: 14px;
$spacing-16: 16px;
$spacing-20: 20px;
$spacing-24: 24px;
$spacing-28: 28px;
$spacing-32: 32px;
$spacing-36: 36px;
$spacing-40: 40px;
$spacing-44: 40px;
$spacing-48: 48px;
$font-families-inter-display: InterDisplay;
$font-families-inter: InterVariable;
$font-families-cairo: Cairo;
$font-families-geist-mono: 'Geist Mono';
$font-families-sans: InterVariable, Cairo, sans-serif;
$font-families-mono: 'Geist Mono', monospace;
$font-families-display: InterDisplay, Cairo, sans-serif;
$line-heights-0: 64px;
$line-heights-1: 56px;
$line-heights-2: 48px;
$line-heights-3: 40px;
$line-heights-4: 32px;
$line-heights-5: 28px;
$line-heights-6: 24px;
$line-heights-7: 20px;
$line-heights-8: 16px;
$line-heights-9: 12px;
$font-weights-display-0: 500;
$font-weights-sans-0: 400;
$font-weights-sans-1: 500;
$font-size-0: 11px;
$font-size-1: 12px;
$font-size-2: 14px;
$font-size-3: 16px;
$font-size-4: 18px;
$font-size-5: 20px;
$font-size-6: 24px;
$font-size-7: 32px;
$font-size-8: 40px;
$font-size-9: 48px;
$font-size-10: 56px;
$letter-spacing-0: -0.01em;
$letter-spacing-1: -0.005em;
$letter-spacing-2: 0em;
$letter-spacing-3: -0.015em;
$letter-spacing-4: -0.011000000000000001em;
$letter-spacing-5: -0.006em;
$letter-spacing-6: 0.06em;
$letter-spacing-7: 0.04em;
$letter-spacing-8: 0.02em;
$paragraph-spacing-0: 0;
$text-case-none: none;
$text-case-uppercase: uppercase;
$text-decoration-none: none;
$paragraph-indent-0: 0px;
$title-h1-title: 500 56px/64px InterDisplay, Cairo, sans-serif;
$title-h2-title: 500 48px/56px InterDisplay, Cairo, sans-serif;
$title-h3-title: 500 40px/48px InterDisplay, Cairo, sans-serif;
$title-h4-title: 500 32px/40px InterDisplay, Cairo, sans-serif;
$title-h5-title: 500 24px/32px InterDisplay, Cairo, sans-serif;
$title-h6-title: 500 20px/28px InterDisplay, Cairo, sans-serif;
$label-xl: 500 24px/32px InterVariable, Cairo, sans-serif;
$label-lg: 500 18px/24px InterVariable, Cairo, sans-serif;
$label-md: 500 16px/24px InterVariable, Cairo, sans-serif;
$label-sm: 500 14px/20px InterVariable, Cairo, sans-serif;
$label-xs: 500 12px/16px InterVariable, Cairo, sans-serif;
$paragraph-xl: 400 24px/32px InterVariable, Cairo, sans-serif;
$paragraph-lg: 400 18px/24px InterVariable, Cairo, sans-serif;
$paragraph-md: 400 16px/24px InterVariable, Cairo, sans-serif;
$paragraph-sm: 400 14px/20px InterVariable, Cairo, sans-serif;
$paragraph-xs: 400 12px/16px InterVariable, Cairo, sans-serif;
$subheading-md: 500 16px/24px InterVariable, Cairo, sans-serif;
$subheading-sm: 500 14px/20px InterVariable, Cairo, sans-serif;
$subheading-xs: 500 12px/16px InterVariable, Cairo, sans-serif;
$subheading-xxs: 500 11px/12px InterVariable, Cairo, sans-serif;
$docs-label: 500 18px/32px InterVariable, Cairo, sans-serif;
$docs-paragraph: 400 18px/32px InterVariable, Cairo, sans-serif;

[data-theme="dark"] {
  --color-bg-white-0: #171717;
  --color-bg-weak-50: #1c1c1c;
  --color-bg-strong-950: #ffffff;
  --color-bg-surface-800: #ebebeb;
  --color-bg-soft-200: #333333;
  --color-bg-sub-300: #5c5c5c;
  --color-state-faded-light: rgba(163, 163, 163, 0.24);
  --color-state-faded-base: #7b7b7b;
  --color-state-faded-dark: #d1d1d1;
  --color-state-faded-lighter: rgba(163, 163, 163, 0.16);
  --color-state-error-base: #e93544;
  --color-state-error-light: rgba(251, 55, 72, 0.24);
  --color-state-error-dark: #ff6875;
  --color-state-error-lighter: rgba(251, 55, 72, 0.16);
  --color-state-warning-dark: #ff9a68;
  --color-state-warning-base: #e97135;
  --color-state-warning-light: rgba(255, 145, 71, 0.24);
  --color-state-warning-lighter: rgba(255, 145, 71, 0.16);
  --color-state-information-dark: #6895ff;
  --color-state-information-base: #335cff;
  --color-state-information-light: rgba(71, 108, 255, 0.24);
  --color-state-information-lighter: rgba(71, 108, 255, 0.16);
  --color-state-success-dark: #3ee089;
  --color-state-success-base: #1daf61;
  --color-state-success-light: rgba(31, 193, 107, 0.16);
  --color-state-success-lighter: rgba(31, 193, 107, 0.1);
  --color-state-away-dark: #ffd268;
  --color-state-away-base: #e6a819;
  --color-state-away-light: rgba(251, 198, 75, 0.24);
  --color-state-away-lighter: rgba(251, 198, 75, 0.16);
  --color-state-feature-dark: #8c71f6;
  --color-state-feature-base: #7d52f4;
  --color-state-feature-light: rgba(120, 77, 239, 0.24);
  --color-state-feature-lighter: rgba(120, 77, 239, 0.16);
  --color-state-verified-dark: #68cdff;
  --color-state-verified-base: #35ade9;
  --color-state-verified-light: rgba(71, 194, 255, 0.24);
  --color-state-verified-lighter: rgba(71, 194, 255, 0.16);
  --color-state-highlighted-dark: #ff68b3;
  --color-state-highlighted-base: #e9358f;
  --color-state-highlighted-light: rgba(251, 75, 163, 0.24);
  --color-state-highlighted-lighter: rgba(251, 75, 163, 0.16);
  --color-state-stable-dark: #3fdec9;
  --color-state-stable-base: #1daf9c;
  --color-state-stable-light: rgba(34, 211, 187, 0.24);
  --color-state-stable-lighter: rgba(34, 211, 187, 0.16);
  --color-text-strong-950: #ffffff;
  --color-text-sub-600: #a3a3a3;
  --color-text-disabled-300: #5c5c5c;
  --color-text-white-0: #171717;
  --color-text-soft-400: #7b7b7b;
  --color-stroke-soft-200: #333333;
  --color-stroke-strong-950: #ffffff;
  --color-stroke-white-0: #171717;
  --color-stroke-sub-300: #5c5c5c;
  --color-icon-sub-600: #a3a3a3;
  --color-icon-strong-950: #ffffff;
  --color-icon-soft-400: #7b7b7b;
  --color-icon-disabled-300: #5c5c5c;
  --color-icon-white-0: #171717;
  --color-social-apple: #ffffff;
  --color-social-twitter: #ffffff;
  --color-social-github: #ffffff;
  --color-social-notion: #ffffff;
  --color-social-tidal: #ffffff;
  --color-social-amazon: #ffffff;
  --color-social-zendesk: #ffffff;
  --color-illustration-strong-400: #5c5c5c;
  --color-illustration-sub-300: #333333;
  --color-illustration-soft-200: #292929;
  --color-illustration-weak-100: #1c1c1c;
  --color-illustration-white-0: #171717;
  --color-overlay-overlay: rgba(82, 88, 102, 0.32);
  --shadow-buttons-primary-focus: 0 0 0 2px #171717, 0 0 0 4px #fb4ba31a;
  --shadow-buttons-important-focus: 0 0 0 2px #171717, 0 0 0 4px #99a0ae29;
  --shadow-buttons-error-focus: 0 0 0 2px #171717, 0 0 0 4px #fb37481a;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --color-bg-white-0: #171717;
    --color-bg-weak-50: #1c1c1c;
    --color-bg-strong-950: #ffffff;
    --color-bg-surface-800: #ebebeb;
    --color-bg-soft-200: #333333;
    --color-bg-sub-300: #5c5c5c;
    --color-state-faded-light: rgba(163, 163, 163, 0.24);
    --color-state-faded-base: #7b7b7b;
    --color-state-faded-dark: #d1d1d1;
    --color-state-faded-lighter: rgba(163, 163, 163, 0.16);
    --color-state-error-base: #e93544;
    --color-state-error-light: rgba(251, 55, 72, 0.24);
    --color-state-error-dark: #ff6875;
    --color-state-error-lighter: rgba(251, 55, 72, 0.16);
    --color-state-warning-dark: #ff9a68;
    --color-state-warning-base: #e97135;
    --color-state-warning-light: rgba(255, 145, 71, 0.24);
    --color-state-warning-lighter: rgba(255, 145, 71, 0.16);
    --color-state-information-dark: #6895ff;
    --color-state-information-base: #335cff;
    --color-state-information-light: rgba(71, 108, 255, 0.24);
    --color-state-information-lighter: rgba(71, 108, 255, 0.16);
    --color-state-success-dark: #3ee089;
    --color-state-success-base: #1daf61;
    --color-state-success-light: rgba(31, 193, 107, 0.16);
    --color-state-success-lighter: rgba(31, 193, 107, 0.1);
    --color-state-away-dark: #ffd268;
    --color-state-away-base: #e6a819;
    --color-state-away-light: rgba(251, 198, 75, 0.24);
    --color-state-away-lighter: rgba(251, 198, 75, 0.16);
    --color-state-feature-dark: #8c71f6;
    --color-state-feature-base: #7d52f4;
    --color-state-feature-light: rgba(120, 77, 239, 0.24);
    --color-state-feature-lighter: rgba(120, 77, 239, 0.16);
    --color-state-verified-dark: #68cdff;
    --color-state-verified-base: #35ade9;
    --color-state-verified-light: rgba(71, 194, 255, 0.24);
    --color-state-verified-lighter: rgba(71, 194, 255, 0.16);
    --color-state-highlighted-dark: #ff68b3;
    --color-state-highlighted-base: #e9358f;
    --color-state-highlighted-light: rgba(251, 75, 163, 0.24);
    --color-state-highlighted-lighter: rgba(251, 75, 163, 0.16);
    --color-state-stable-dark: #3fdec9;
    --color-state-stable-base: #1daf9c;
    --color-state-stable-light: rgba(34, 211, 187, 0.24);
    --color-state-stable-lighter: rgba(34, 211, 187, 0.16);
    --color-text-strong-950: #ffffff;
    --color-text-sub-600: #a3a3a3;
    --color-text-disabled-300: #5c5c5c;
    --color-text-white-0: #171717;
    --color-text-soft-400: #7b7b7b;
    --color-stroke-soft-200: #333333;
    --color-stroke-strong-950: #ffffff;
    --color-stroke-white-0: #171717;
    --color-stroke-sub-300: #5c5c5c;
    --color-icon-sub-600: #a3a3a3;
    --color-icon-strong-950: #ffffff;
    --color-icon-soft-400: #7b7b7b;
    --color-icon-disabled-300: #5c5c5c;
    --color-icon-white-0: #171717;
    --color-social-apple: #ffffff;
    --color-social-twitter: #ffffff;
    --color-social-github: #ffffff;
    --color-social-notion: #ffffff;
    --color-social-tidal: #ffffff;
    --color-social-amazon: #ffffff;
    --color-social-zendesk: #ffffff;
    --color-illustration-strong-400: #5c5c5c;
    --color-illustration-sub-300: #333333;
    --color-illustration-soft-200: #292929;
    --color-illustration-weak-100: #1c1c1c;
    --color-illustration-white-0: #171717;
    --color-overlay-overlay: rgba(82, 88, 102, 0.32);
    --shadow-buttons-primary-focus: 0 0 0 2px #171717, 0 0 0 4px #fb4ba31a;
    --shadow-buttons-important-focus: 0 0 0 2px #171717, 0 0 0 4px #99a0ae29;
    --shadow-buttons-error-focus: 0 0 0 2px #171717, 0 0 0 4px #fb37481a;
  }
}