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

:root {
  --400: rgb(0,133,255); /* @kind color */
  --button-extra-small-corner: 5; /* @kind radius */
  --button-extra-small-gap: 4; /* @kind spacing */
  --button-extra-small-height: 24; /* @kind spacing */
  --button-extra-small-leftpadding: 8; /* @kind spacing */
  --button-extra-small-padding: 16; /* @kind spacing */
  --button-large-corner: 8; /* @kind radius */
  --button-large-gap: 8; /* @kind spacing */
  --button-large-height: 48; /* @kind spacing */
  --button-large-padding: 16; /* @kind spacing */
  --button-medium-corner-2: 4; /* @kind radius */
  --button-medium-corner: 8; /* @kind radius */
  --button-medium-gap: 8; /* @kind spacing */
  --button-medium-height: 40; /* @kind spacing */
  --button-medium-padding: 16; /* @kind spacing */
  --button-small-corner: 5; /* @kind radius */
  --button-small-gap: 8; /* @kind spacing */
  --button-small-height: 32; /* @kind spacing */
  --button-small-padding: 16; /* @kind spacing */
  --components-divider-2: rgba(145,158,171,0.2); /* @kind color */
  --components-divider: rgba(145,158,171,0.2); /* @kind color */
  --docs-components-color: rgb(123,97,255); /* @kind color */
  --docs-components-radius: var(--radius-3);
  --field-extrasmallfieldcorner: 4; /* @kind radius */
  --field-extrasmallfieldheight: 24; /* @kind spacing */
  --field-largefieldcorner: 8; /* @kind radius */
  --field-largefieldheight: 48; /* @kind spacing */
  --field-leftpaddingfieldlarge: 16; /* @kind spacing */
  --field-mediumfieldcorner: 5; /* @kind radius */
  --field-mediumfieldheight: 40; /* @kind spacing */
  --field-rightpaddingfieldlarge: 16; /* @kind spacing */
  --field-sfields: 20; /* @kind spacing */
  --field-smallfieldcorner: 5; /* @kind radius */
  --field-smallfieldheight: 32; /* @kind spacing */
  --field-stfields: 6; /* @kind spacing */
  --gray-100: rgb(244,247,251); /* @kind color */
  --gray-200: rgb(234,238,245); /* @kind color */
  --gray-300: rgb(215,222,234); /* @kind color */
  --gray-400: rgb(183,190,205); /* @kind color */
  --gray-50: rgb(250,252,255); /* @kind color */
  --gray-600: rgb(134,144,162); /* @kind color */
  --gray-700: rgb(100,110,130); /* @kind color */
  --gray-800: rgb(37,50,63); /* @kind color */
  --gray-900: rgb(56,61,72); /* @kind color */
  --grey-500-2: rgb(145,158,171); /* @kind color */
  --grey-500: rgb(145,158,171); /* @kind color */
  --grey-600: rgb(99,115,129); /* @kind color */
  --grey-800: rgb(33,43,54); /* @kind color */
  --hviewmorebutton: 32; /* @kind spacing */
  --image-avatar-a-corner: 8; /* @kind radius */
  --image-avatar-a: 68; /* @kind spacing */
  --image-avatar-b-corner: 5; /* @kind radius */
  --image-avatar-b: 50; /* @kind spacing */
  --image-avatar-c-corner: 5; /* @kind radius */
  --image-avatar-c: 40; /* @kind spacing */
  --image-icon-size-extrasmall: 10; /* @kind spacing */
  --image-icon-size-large: 40; /* @kind spacing */
  --image-icon-size-medium: 24; /* @kind spacing */
  --image-icon-size-small: 16; /* @kind spacing */
  --image-product-image-a-corner: 12; /* @kind radius */
  --image-product-image-a: 164; /* @kind spacing */
  --image-product-image-b-corner: 8; /* @kind radius */
  --image-product-image-b: 134; /* @kind spacing */
  --image-product-image-c-corner: 8; /* @kind radius */
  --image-product-image-c: 100; /* @kind spacing */
  --image-product-image-d-corner: 8; /* @kind radius */
  --image-product-image-d: 94; /* @kind spacing */
  --image-product-image-e-corner: 8; /* @kind radius */
  --image-product-image-e: 68; /* @kind spacing */
  --image-product-image-f-corner: 5; /* @kind radius */
  --image-product-image-f: 50; /* @kind spacing */
  --image-sproductimageparaph-2: 8; /* @kind spacing */
  --image-sproductimageparaph: 16; /* @kind spacing */
  --layouts-row-1l: 40; /* @kind spacing */
  --layouts-row-2l: 44; /* @kind spacing */
  --layouts-row-3l: 68; /* @kind spacing */
  --layouts-row-4l: 80; /* @kind spacing */
  --layouts-row-5l: 100; /* @kind spacing */
  --layouts-s2l: 4; /* @kind spacing */
  --layouts-srow-1l: 8; /* @kind spacing */
  --layouts-srow-2l: 12; /* @kind spacing */
  --layouts-srow-3l: 24; /* @kind spacing */
  --layouts-srow-4l: 24; /* @kind spacing */
  --layouts-srow-5l: 24; /* @kind spacing */
  --main-light-primary: var(--primary-main); /* @kind color */
  --neutral-300: rgb(215,222,234); /* @kind color */
  --neutral-600: rgb(134,144,162); /* @kind color */
  --neutral-900: rgb(56,61,72); /* @kind color */
  --neutral-white: rgb(255,255,255); /* @kind color */
  --other-facebook: rgb(24,119,242); /* @kind color */
  --primary-400: rgb(0,133,255); /* @kind color */
  --primary-light: rgb(91,212,228); /* @kind color */
  --primary-main-2: rgb(0,133,255); /* @kind color */
  --primary-main: rgb(0,133,255); /* @kind color */
  --progress-linear-radius: var(--radius-50);
  --radius-3: 24; /* @kind radius */
  --radius-50: 500; /* @kind radius */
  --screen-down-margin: 72; /* @kind spacing */
  --screen-margin: 24; /* @kind spacing */
  --screen-sbannerbody: 32; /* @kind spacing */
  --screen-sbodybutton: 32; /* @kind spacing */
  --screen-shbutton-2: 4; /* @kind spacing */
  --screen-shbutton: 10; /* @kind spacing */
  --screen-sheaderbody: 24; /* @kind spacing */
  --section-product-card-list-space: 16; /* @kind spacing */
  --section-simagetitle: 16; /* @kind spacing */
  --section-slargetitle-fields: 24; /* @kind spacing */
  --section-sm18r12: 4; /* @kind spacing */
  --section-sparapgraphbutton: 8; /* @kind spacing */
  --section-sscreen: 48; /* @kind spacing */
  --section-ssection: 24; /* @kind spacing */
  --section-stbase: 16; /* @kind spacing */
  --shbutton: 10; /* @kind spacing */
  --spacing-1: 8; /* @kind spacing */
  --text-primary: var(--grey-800); /* @kind color */
  --text-secondary: var(--grey-600); /* @kind color */
  --warning-main: rgb(255,171,0); /* @kind color */
  --white-main-2: rgb(255,255,255); /* @kind color */
  --white-main: rgb(255,255,255); /* @kind color */
  --white: rgb(255,255,255); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --components-divider-2: rgba(145,158,171,0.2); /* @kind color */
  --components-divider: rgba(145,158,171,0.2); /* @kind color */
  --docs-components-color: rgb(123,97,255); /* @kind color */
  --docs-components-radius: var(--radius-3);
  --main-light-primary: var(--primary-light); /* @kind color */
  --neutral-300: rgb(100,110,130); /* @kind color */
  --neutral-600: rgb(183,190,205); /* @kind color */
  --neutral-900: rgb(244,247,251); /* @kind color */
  --neutral-white: rgb(29,39,49); /* @kind color */
  --primary-400: rgb(96,184,251); /* @kind color */
  --text-primary: var(--white-main); /* @kind color */
  --text-secondary: var(--grey-500); /* @kind color */
}