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

:root {
  --10px: 10;
  --12px: 12;
  --14px: 14;
  --16px: 16;
  --18px: 18;
  --20px: 20;
  --24px: 24;
  --28px: 28;
  --2px: 2;
  --32px: 32;
  --4px: 4;
  --64px: 64;
  --6px: 6;
  --8px: 8;
  --background-additional-onboarding-overlay: rgba(22,22,22,0.95); /* @kind color */
  --background-additional-overlay: rgba(0,0,0,0.72); /* @kind color */
  --background-additional-popups: rgba(36,36,36,0.88); /* @kind color */
  --background-additional-tabbar: rgba(22,22,22,0.22); /* @kind color */
  --background-additional-transparent-10: rgba(255,255,255,0.1); /* @kind color */
  --background-additional-transparent-15: rgba(255,255,255,0.15); /* @kind color */
  --background-additional-transparent-5: rgba(255,255,255,0.05); /* @kind color */
  --background-additional-white: rgb(255,255,255); /* @kind color */
  --background-primary: rgb(22,22,22); /* @kind color */
  --background-secondary: rgb(36,36,36); /* @kind color */
  --background-tertiary: rgb(50,50,50); /* @kind color */
  --button-l: 100;
  --button-m: 100;
  --button-s: 100;
  --button-xs: 100;
  --none: 0;
  --small-object: 8;
  --text-icons-disabled: rgb(110,110,110); /* @kind color */
  --text-icons-interactive-secondary: rgb(253,0,233); /* @kind color */
  --text-icons-interactive: rgb(110,255,70); /* @kind color */
  --text-icons-inverted: rgb(22,22,22); /* @kind color */
  --text-icons-primary: rgb(255,255,255); /* @kind color */
  --text-icons-secondary: rgb(185,185,185); /* @kind color */
}

:root[data-mode="square"] {
  --button-l: 20;
  --button-m: 16;
  --button-s: 12;
  --button-xs: 10;
  --small-object: 4;
}