/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --0: var(--neutral-gray-0); /* @kind color */
  --100: var(--neutral-gray-100); /* @kind color */
  --200: var(--neutral-gray-200); /* @kind color */
  --300: var(--neutral-gray-300); /* @kind color */
  --400: var(--neutral-gray-400); /* @kind color */
  --500: var(--neutral-gray-500); /* @kind color */
  --50: var(--neutral-gray-50); /* @kind color */
  --600: var(--neutral-gray-600); /* @kind color */
  --700: var(--neutral-gray-700); /* @kind color */
  --800: var(--neutral-gray-800); /* @kind color */
  --900: var(--neutral-gray-900); /* @kind color */
  --950: var(--neutral-gray-950); /* @kind color */
  --alpha-blue-alpha-10: rgba(71,108,255,0.1); /* @kind color */
  --alpha-blue-alpha-16: rgba(71,108,255,0.16); /* @kind color */
  --alpha-blue-alpha-24: rgba(71,108,255,0.24); /* @kind color */
  --alpha-gray-alpha-10: rgba(163,163,163,0.1); /* @kind color */
  --alpha-gray-alpha-24: rgba(163,163,163,0.24); /* @kind color */
  --alpha-green-alpha-10: rgba(31,193,107,0.1); /* @kind color */
  --alpha-green-alpha-16: rgba(31,193,107,0.16); /* @kind color */
  --alpha-green-alpha-24: rgba(31,193,107,0.24); /* @kind color */
  --alpha-orange-alpha-10: rgba(250,115,25,0.1); /* @kind color */
  --alpha-orange-alpha-16: rgba(250,115,25,0.16); /* @kind color */
  --alpha-orange-alpha-24: rgba(250,115,25,0.24); /* @kind color */
  --alpha-pink-alpha-16: rgba(251,75,163,0.16); /* @kind color */
  --alpha-pink-alpha-24: rgba(251,75,163,0.24); /* @kind color */
  --alpha-primary-alpha-10: var(--theme-blue-alpha-10); /* @kind color */
  --alpha-purple-alpha-10: rgba(120,77,239,0.1); /* @kind color */
  --alpha-purple-alpha-16: rgba(120,77,239,0.16); /* @kind color */
  --alpha-purple-alpha-24: rgba(120,77,239,0.24); /* @kind color */
  --alpha-red-alpha-10: rgba(251,55,72,0.1); /* @kind color */
  --alpha-red-alpha-16: rgba(251,55,72,0.16); /* @kind color */
  --alpha-red-alpha-24: rgba(251,55,72,0.24); /* @kind color */
  --alpha-shadow-blue-alpha-8: rgba(18,35,104,0.08); /* @kind color */
  --alpha-shadow-gray-alpha-0: rgba(23,23,23,0); /* @kind color */
  --alpha-shadow-gray-alpha-4: rgba(23,23,23,0.04); /* @kind color */
  --alpha-sky-alpha-16: rgba(71,194,255,0.16); /* @kind color */
  --alpha-sky-alpha-24: rgba(71,194,255,0.24); /* @kind color */
  --alpha-slate-alpha-16: rgba(153,160,174,0.16); /* @kind color */
  --alpha-teal-alpha-16: rgba(34,211,187,0.16); /* @kind color */
  --alpha-teal-alpha-24: rgba(34,211,187,0.24); /* @kind color */
  --alpha-white-alpha-10: rgba(255,255,255,0.1); /* @kind color */
  --alpha-white-alpha-16: rgba(255,255,255,0.16); /* @kind color */
  --alpha-yellow-alpha-16: rgba(251,198,75,0.16); /* @kind color */
  --alpha-yellow-alpha-24: rgba(251,198,75,0.24); /* @kind color */
  --bg-soft-200: var(--200); /* @kind color */
  --bg-strong-950: var(--950); /* @kind color */
  --bg-sub-300: var(--300); /* @kind color */
  --bg-surface-800: var(--800); /* @kind color */
  --bg-weak-25: var(--50); /* @kind color */
  --bg-weak-50: var(--50); /* @kind color */
  --bg-white-0: var(--0); /* @kind color */
  --blue-200: rgb(192,213,255); /* @kind color */
  --blue-400: rgb(77,130,255); /* @kind color */
  --blue-500: rgb(51,92,255); /* @kind color */
  --blue-50: rgb(235,241,255); /* @kind color */
  --blue-700: rgb(37,71,208); /* @kind color */
  --blue-950: rgb(18,35,104); /* @kind color */
  --color-black-400: rgba(47,64,91,0.27); /* @kind color */
  --color-black-basic: rgb(47,64,91); /* @kind color */
  --grays-white: rgb(255,255,255); /* @kind color */
  --green-200: rgb(194,245,218); /* @kind color */
  --green-400: rgb(62,224,137); /* @kind color */
  --green-500: rgb(31,193,107); /* @kind color */
  --green-50: rgb(227,247,236); /* @kind color */
  --green-600: rgb(29,175,97); /* @kind color */
  --green-700: rgb(23,140,78); /* @kind color */
  --green-950: rgb(11,70,39); /* @kind color */
  --icon-disabled-300: var(--300); /* @kind color */
  --icon-soft-400: var(--400); /* @kind color */
  --icon-strong-950: var(--950); /* @kind color */
  --icon-sub-600: var(--600); /* @kind color */
  --icon-white-0: var(--0); /* @kind color */
  --line-height-body-b1: var(--space-300);
  --line-height-body-b2: var(--space-250);
  --line-height-heading-h3: var(--space-250);
  --line-height-small-sm1: var(--space-200);
  --neutral-gray-0: rgb(255,255,255); /* @kind color */
  --neutral-gray-100: rgb(245,245,245); /* @kind color */
  --neutral-gray-200: rgb(235,235,235); /* @kind color */
  --neutral-gray-300: rgb(209,209,209); /* @kind color */
  --neutral-gray-400: rgb(163,163,163); /* @kind color */
  --neutral-gray-500: rgb(123,123,123); /* @kind color */
  --neutral-gray-50: rgb(247,247,247); /* @kind color */
  --neutral-gray-600: rgb(92,92,92); /* @kind color */
  --neutral-gray-700: rgb(51,51,51); /* @kind color */
  --neutral-gray-800: rgb(38,38,38); /* @kind color */
  --neutral-gray-900: rgb(28,28,28); /* @kind color */
  --neutral-gray-950: rgb(23,23,23); /* @kind color */
  --neutral-slate-0: rgb(255,255,255); /* @kind color */
  --neutral-slate-100: rgb(242,245,248); /* @kind color */
  --neutral-slate-200: rgb(234,236,240); /* @kind color */
  --neutral-slate-300: rgb(202,207,216); /* @kind color */
  --neutral-slate-400: rgb(153,160,174); /* @kind color */
  --neutral-slate-500: rgb(113,119,132); /* @kind color */
  --neutral-slate-50: rgb(245,247,250); /* @kind color */
  --neutral-slate-600: rgb(82,88,102); /* @kind color */
  --neutral-slate-700: rgb(43,48,59); /* @kind color */
  --neutral-slate-800: rgb(34,37,48); /* @kind color */
  --neutral-slate-900: rgb(24,27,37); /* @kind color */
  --neutral-slate-950: rgb(14,18,27); /* @kind color */
  --orange-200: rgb(255,217,192); /* @kind color */
  --orange-400: rgb(255,164,104); /* @kind color */
  --orange-500: rgb(250,115,25); /* @kind color */
  --orange-50: rgb(255,243,235); /* @kind color */
  --orange-600: rgb(225,102,20); /* @kind color */
  --orange-700: rgb(206,94,18); /* @kind color */
  --orange-950: rgb(113,51,10); /* @kind color */
  --paragraph-spacing-body-b1: var(--space-200);
  --paragraph-spacing-body-b2: var(--space-175);
  --paragraph-spacing-heading-h3: var(--space-200);
  --paragraph-spacing-small-sm1: var(--space-150);
  --pink-200: rgb(255,192,223); /* @kind color */
  --pink-400: rgb(255,104,179); /* @kind color */
  --pink-500: rgb(251,75,163); /* @kind color */
  --pink-50: rgb(255,235,244); /* @kind color */
  --pink-600: rgb(233,53,143); /* @kind color */
  --pink-950: rgb(104,18,61); /* @kind color */
  --primary-base: var(--theme-blue-base); /* @kind color */
  --primary-dark: var(--theme-blue-dark); /* @kind color */
  --purple-200: rgb(202,192,255); /* @kind color */
  --purple-400: rgb(140,113,246); /* @kind color */
  --purple-500: rgb(125,82,244); /* @kind color */
  --purple-50: rgb(239,235,255); /* @kind color */
  --purple-700: rgb(91,44,201); /* @kind color */
  --purple-950: rgb(53,26,117); /* @kind color */
  --radius-10: 10;
  --radius-12: 12;
  --radius-16: 16;
  --radius-2: 2;
  --radius-4: 4;
  --radius-6: 6;
  --radius-8: 8;
  --radius-full-2: 999;
  --radius-full: 999;
  --red-200: rgb(255,192,197); /* @kind color */
  --red-400: rgb(255,104,117); /* @kind color */
  --red-500: rgb(251,55,72); /* @kind color */
  --red-50: rgb(255,235,236); /* @kind color */
  --red-600: rgb(233,53,68); /* @kind color */
  --red-700: rgb(208,37,51); /* @kind color */
  --red-950: rgb(104,18,25); /* @kind color */
  --selection-spasing-xxx-sm: var(--space-050);
  --shadow-gray-shadow-4: var(--alpha-shadow-gray-alpha-4); /* @kind color */
  --size-body-b1: var(--space-200);
  --size-body-b2: var(--space-175);
  --size-heading-h3: var(--space-200);
  --size-small-sm1: var(--space-150);
  --sky-200: rgb(192,234,255); /* @kind color */
  --sky-400: rgb(104,205,255); /* @kind color */
  --sky-500: rgb(71,194,255); /* @kind color */
  --sky-50: rgb(235,248,255); /* @kind color */
  --sky-600: rgb(53,173,233); /* @kind color */
  --sky-950: rgb(18,75,104); /* @kind color */
  --social-amazon: rgb(53,62,71); /* @kind color */
  --space-025: 2;
  --space-050: 4;
  --space-0: 0;
  --space-125: 10;
  --space-150: 12;
  --space-175: 14;
  --space-200: 16;
  --space-250: 20;
  --space-300: 24;
  --spacing-0: 0;
  --spacing-10: 10;
  --spacing-12: 12;
  --spacing-14: 14;
  --spacing-16: 16;
  --spacing-24: 24;
  --spacing-2: 2;
  --spacing-32: 32;
  --spacing-40: 40;
  --spacing-4: 4;
  --spacing-8: 8;
  --state-away-base: var(--yellow-500); /* @kind color */
  --state-away-dark: var(--yellow-950); /* @kind color */
  --state-away-light: var(--yellow-200); /* @kind color */
  --state-away-lighter: var(--yellow-50); /* @kind color */
  --state-error-base: var(--red-500); /* @kind color */
  --state-error-dark: var(--red-950); /* @kind color */
  --state-error-light: var(--red-200); /* @kind color */
  --state-error-lighter: var(--red-50); /* @kind color */
  --state-faded-base: var(--500); /* @kind color */
  --state-faded-dark: var(--800); /* @kind color */
  --state-faded-light: var(--200); /* @kind color */
  --state-faded-lighter: var(--100); /* @kind color */
  --state-feature-base: var(--purple-500); /* @kind color */
  --state-feature-dark: var(--purple-950); /* @kind color */
  --state-feature-light: var(--purple-200); /* @kind color */
  --state-feature-lighter: var(--purple-50); /* @kind color */
  --state-highlighted-base: var(--pink-500); /* @kind color */
  --state-highlighted-dark: var(--pink-950); /* @kind color */
  --state-highlighted-light: var(--pink-200); /* @kind color */
  --state-highlighted-lighter: var(--pink-50); /* @kind color */
  --state-information-base: var(--blue-500); /* @kind color */
  --state-information-dark: var(--blue-950); /* @kind color */
  --state-information-light: var(--blue-200); /* @kind color */
  --state-information-lighter: var(--blue-50); /* @kind color */
  --state-stable-base: var(--teal-500); /* @kind color */
  --state-stable-dark: var(--teal-950); /* @kind color */
  --state-stable-light: var(--teal-200); /* @kind color */
  --state-stable-lighter: var(--teal-50); /* @kind color */
  --state-success-base: var(--green-500); /* @kind color */
  --state-success-dark: var(--green-950); /* @kind color */
  --state-success-light: var(--green-200); /* @kind color */
  --state-success-lighter: var(--green-50); /* @kind color */
  --state-verified-base: var(--sky-500); /* @kind color */
  --state-verified-dark: var(--sky-950); /* @kind color */
  --state-verified-light: var(--sky-200); /* @kind color */
  --state-verified-lighter: var(--sky-50); /* @kind color */
  --state-warning-base: var(--orange-500); /* @kind color */
  --state-warning-dark: var(--orange-950); /* @kind color */
  --state-warning-light: var(--orange-200); /* @kind color */
  --state-warning-lighter: var(--orange-50); /* @kind color */
  --static-static-black: var(--950); /* @kind color */
  --static-static-white: var(--0); /* @kind color */
  --stroke-soft-200: var(--200); /* @kind color */
  --stroke-strong-950: var(--950); /* @kind color */
  --stroke-sub-300: var(--300); /* @kind color */
  --stroke-white-0: var(--0); /* @kind color */
  --teal-200: rgb(194,245,238); /* @kind color */
  --teal-400: rgb(63,222,201); /* @kind color */
  --teal-500: rgb(34,211,187); /* @kind color */
  --teal-50: rgb(228,251,248); /* @kind color */
  --teal-600: rgb(29,175,156); /* @kind color */
  --teal-950: rgb(11,70,62); /* @kind color */
  --text-disabled-300: var(--300); /* @kind color */
  --text-primary: var(--color-black-basic); /* @kind color */
  --text-soft-400: var(--400); /* @kind color */
  --text-strong-950: var(--950); /* @kind color */
  --text-sub-600: var(--600); /* @kind color */
  --text-tertiary: var(--color-black-400); /* @kind color */
  --text-white-0: var(--0); /* @kind color */
  --theme-blue-alpha-10: var(--alpha-blue-alpha-10); /* @kind color */
  --theme-blue-base: var(--blue-500); /* @kind color */
  --theme-blue-dark: var(--blue-700); /* @kind color */
  --theme-green-alpha-10: var(--alpha-green-alpha-10); /* @kind color */
  --theme-green-alpha-24: var(--alpha-green-alpha-24); /* @kind color */
  --theme-green-base: var(--green-600); /* @kind color */
  --theme-green-dark: var(--green-700); /* @kind color */
  --theme-orange-alpha-10: var(--alpha-orange-alpha-16); /* @kind color */
  --theme-orange-base: var(--orange-500); /* @kind color */
  --theme-orange-dark: var(--orange-700); /* @kind color */
  --theme-purple-alpha-10: var(--alpha-purple-alpha-10); /* @kind color */
  --theme-purple-base: var(--purple-500); /* @kind color */
  --theme-purple-dark: var(--purple-700); /* @kind color */
  --type-font-weight-medium: "medium";
  --type-font-weight-regular-2: "regular";
  --type-font-weight-regular: "regular";
  --type-font-weight-semibold: "semibold";
  --yellow-200: rgb(255,236,192); /* @kind color */
  --yellow-400: rgb(255,210,104); /* @kind color */
  --yellow-500: rgb(246,181,30); /* @kind color */
  --yellow-50: rgb(255,250,235); /* @kind color */
  --yellow-600: rgb(230,168,25); /* @kind color */
  --yellow-950: rgb(98,76,24); /* @kind color */
}

:root[data-mode="slate"] {
  --0: var(--neutral-slate-0); /* @kind color */
  --100: var(--neutral-slate-100); /* @kind color */
  --200: var(--neutral-slate-200); /* @kind color */
  --300: var(--neutral-slate-300); /* @kind color */
  --400: var(--neutral-slate-400); /* @kind color */
  --500: var(--neutral-slate-500); /* @kind color */
  --50: var(--neutral-slate-50); /* @kind color */
  --600: var(--neutral-slate-600); /* @kind color */
  --700: var(--neutral-slate-700); /* @kind color */
  --800: var(--neutral-slate-800); /* @kind color */
  --900: var(--neutral-slate-900); /* @kind color */
  --950: var(--neutral-slate-950); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --bg-soft-200: var(--700); /* @kind color */
  --bg-strong-950: var(--0); /* @kind color */
  --bg-sub-300: var(--600); /* @kind color */
  --bg-surface-800: var(--200); /* @kind color */
  --bg-weak-25: var(--900); /* @kind color */
  --bg-weak-50: var(--800); /* @kind color */
  --bg-white-0: var(--950); /* @kind color */
  --grays-white: rgb(255,255,255); /* @kind color */
  --grays-white: rgb(255,255,255); /* @kind color */
  --grays-white: rgb(255,255,255); /* @kind color */
  --grays-white: rgb(255,255,255); /* @kind color */
  --icon-disabled-300: var(--600); /* @kind color */
  --icon-soft-400: var(--500); /* @kind color */
  --icon-strong-950: var(--0); /* @kind color */
  --icon-sub-600: var(--400); /* @kind color */
  --icon-white-0: var(--950); /* @kind color */
  --shadow-gray-shadow-4: var(--alpha-shadow-gray-alpha-0); /* @kind color */
  --social-amazon: rgb(255,255,255); /* @kind color */
  --state-away-base: var(--yellow-600); /* @kind color */
  --state-away-dark: var(--yellow-400); /* @kind color */
  --state-away-light: var(--alpha-yellow-alpha-24); /* @kind color */
  --state-away-lighter: var(--alpha-yellow-alpha-16); /* @kind color */
  --state-error-base: var(--red-600); /* @kind color */
  --state-error-dark: var(--red-400); /* @kind color */
  --state-error-light: var(--alpha-red-alpha-24); /* @kind color */
  --state-error-lighter: var(--alpha-red-alpha-16); /* @kind color */
  --state-faded-base: var(--500); /* @kind color */
  --state-faded-dark: var(--300); /* @kind color */
  --state-faded-light: var(--alpha-gray-alpha-24); /* @kind color */
  --state-faded-lighter: var(--alpha-gray-alpha-10); /* @kind color */
  --state-feature-base: var(--purple-500); /* @kind color */
  --state-feature-dark: var(--purple-400); /* @kind color */
  --state-feature-light: var(--alpha-purple-alpha-24); /* @kind color */
  --state-feature-lighter: var(--alpha-purple-alpha-16); /* @kind color */
  --state-highlighted-base: var(--pink-600); /* @kind color */
  --state-highlighted-dark: var(--pink-400); /* @kind color */
  --state-highlighted-light: var(--alpha-pink-alpha-24); /* @kind color */
  --state-highlighted-lighter: var(--alpha-pink-alpha-16); /* @kind color */
  --state-information-base: var(--blue-500); /* @kind color */
  --state-information-dark: var(--blue-400); /* @kind color */
  --state-information-light: var(--alpha-blue-alpha-24); /* @kind color */
  --state-information-lighter: var(--alpha-blue-alpha-16); /* @kind color */
  --state-stable-base: var(--teal-600); /* @kind color */
  --state-stable-dark: var(--teal-400); /* @kind color */
  --state-stable-light: var(--alpha-teal-alpha-24); /* @kind color */
  --state-stable-lighter: var(--alpha-teal-alpha-16); /* @kind color */
  --state-success-base: var(--green-600); /* @kind color */
  --state-success-dark: var(--green-400); /* @kind color */
  --state-success-light: var(--alpha-green-alpha-16); /* @kind color */
  --state-success-lighter: var(--alpha-green-alpha-10); /* @kind color */
  --state-verified-base: var(--sky-600); /* @kind color */
  --state-verified-dark: var(--sky-400); /* @kind color */
  --state-verified-light: var(--alpha-sky-alpha-24); /* @kind color */
  --state-verified-lighter: var(--alpha-sky-alpha-16); /* @kind color */
  --state-warning-base: var(--orange-600); /* @kind color */
  --state-warning-dark: var(--orange-400); /* @kind color */
  --state-warning-light: var(--alpha-orange-alpha-24); /* @kind color */
  --state-warning-lighter: var(--alpha-orange-alpha-16); /* @kind color */
  --static-static-black: var(--950); /* @kind color */
  --static-static-white: var(--0); /* @kind color */
  --stroke-soft-200: var(--800); /* @kind color */
  --stroke-strong-950: var(--0); /* @kind color */
  --stroke-sub-300: var(--600); /* @kind color */
  --stroke-white-0: var(--950); /* @kind color */
  --text-disabled-300: var(--600); /* @kind color */
  --text-soft-400: var(--500); /* @kind color */
  --text-strong-950: var(--0); /* @kind color */
  --text-sub-600: var(--400); /* @kind color */
  --text-white-0: var(--950); /* @kind color */
  --theme-blue-alpha-10: var(--alpha-blue-alpha-10); /* @kind color */
  --theme-blue-base: var(--blue-400); /* @kind color */
  --theme-blue-dark: var(--blue-700); /* @kind color */
  --theme-green-alpha-10: var(--alpha-green-alpha-10); /* @kind color */
  --theme-green-alpha-24: var(--alpha-green-alpha-24); /* @kind color */
  --theme-green-base: var(--green-600); /* @kind color */
  --theme-green-dark: var(--green-700); /* @kind color */
  --theme-orange-alpha-10: var(--alpha-orange-alpha-10); /* @kind color */
  --theme-orange-base: var(--orange-500); /* @kind color */
  --theme-orange-dark: var(--orange-700); /* @kind color */
  --theme-purple-alpha-10: var(--alpha-purple-alpha-10); /* @kind color */
  --theme-purple-base: var(--purple-400); /* @kind color */
  --theme-purple-dark: var(--purple-700); /* @kind color */
  --type-font-weight-regular-2: "regular";
}

:root[data-mode="tablet"] {
  --line-height-body-b1: var(--space-250);
  --line-height-body-b2: var(--space-200);
  --line-height-heading-h3: var(--space-200);
  --line-height-small-sm1: var(--space-175);
  --paragraph-spacing-body-b1: var(--space-175);
  --paragraph-spacing-body-b2: var(--space-150);
  --paragraph-spacing-heading-h3: var(--space-175);
  --paragraph-spacing-small-sm1: var(--space-125);
  --selection-spasing-xxx-sm: var(--space-050);
  --size-body-b1: var(--space-175);
  --size-body-b2: var(--space-150);
  --size-heading-h3: var(--space-175);
  --size-small-sm1: var(--space-125);
}

:root[data-mode="mobile"] {
  --line-height-body-b1: var(--space-175);
  --line-height-body-b2: var(--space-200);
  --line-height-heading-h3: var(--space-175);
  --line-height-small-sm1: var(--space-175);
  --paragraph-spacing-body-b1: var(--space-175);
  --paragraph-spacing-body-b2: var(--space-150);
  --paragraph-spacing-heading-h3: var(--space-175);
  --paragraph-spacing-small-sm1: var(--space-125);
  --selection-spasing-xxx-sm: var(--space-050);
  --size-body-b1: var(--space-175);
  --size-body-b2: var(--space-150);
  --size-heading-h3: var(--space-175);
  --size-small-sm1: var(--space-125);
}

:root[data-mode="purple"] {
  --alpha-primary-alpha-10: var(--theme-purple-alpha-10); /* @kind color */
  --primary-base: var(--theme-purple-base); /* @kind color */
  --primary-dark: var(--theme-purple-dark); /* @kind color */
}

:root[data-mode="orange"] {
  --alpha-primary-alpha-10: var(--theme-orange-alpha-10); /* @kind color */
  --primary-base: var(--theme-orange-base); /* @kind color */
  --primary-dark: var(--theme-orange-dark); /* @kind color */
}

:root[data-mode="green"] {
  --alpha-primary-alpha-10: var(--theme-green-alpha-10); /* @kind color */
  --primary-base: var(--theme-green-base); /* @kind color */
  --primary-dark: var(--theme-green-dark); /* @kind color */
}

:root[data-theme="light"], .light {
  --grays-white: rgb(255,255,255); /* @kind color */
}