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

:root {
  --background-colorbgcontainer: var(--colors-white-7); /* @kind color */
  --background-colorbgcontainerdisabled: var(--fill-colorfilltertiary); /* @kind color */
  --border-colorborder: rgb(217,217,217); /* @kind color */
  --border-fluorescent-core: var(--color-purple-200); /* @kind color */
  --border-horizonta-divider: var(--color-purple-1000); /* @kind color */
  --border-solid: var(--color-purple-900); /* @kind color */
  --border-vertical-divider: var(--color-purple-400); /* @kind color */
  --color-blue-100: rgb(100,100,137); /* @kind color */
  --color-blue-200: rgb(38,37,101); /* @kind color */
  --color-blue-300: rgba(1,3,49,0.85); /* @kind color */
  --color-grey-100: rgb(234,234,234); /* @kind color */
  --color-grey-200: rgb(227,227,227); /* @kind color */
  --color-purple-1000: rgb(63,52,105); /* @kind color */
  --color-purple-100: rgb(182,182,214); /* @kind color */
  --color-purple-10: rgba(182,182,214,0.1); /* @kind color */
  --color-purple-15: rgba(137,115,222,0.15); /* @kind color */
  --color-purple-200: rgb(198,172,255); /* @kind color */
  --color-purple-25: rgba(137,115,222,0.25); /* @kind color */
  --color-purple-300: rgb(134,124,158); /* @kind color */
  --color-purple-400: rgb(117,105,168); /* @kind color */
  --color-purple-40: rgba(137,115,222,0.4); /* @kind color */
  --color-purple-500: rgb(136,99,241); /* @kind color */
  --color-purple-50: rgba(137,115,222,0.5); /* @kind color */
  --color-purple-600: rgb(88,40,224); /* @kind color */
  --color-purple-700: rgb(99,70,214); /* @kind color */
  --color-purple-800: rgb(101,101,138); /* @kind color */
  --color-purple-900: rgb(76,52,127); /* @kind color */
  --colors-black-5: rgba(0,0,0,0.25); /* @kind color */
  --colors-black-9: rgba(0,0,0,0.88); /* @kind color */
  --colors-white-2: rgba(255,255,255,0.25); /* @kind color */
  --colors-white-6: rgba(255,255,255,0.85); /* @kind color */
  --colors-white-7: rgb(255,255,255); /* @kind color */
  --dark-action: rgb(211,211,211); /* @kind color */
  --dark-alt: rgb(147,147,147); /* @kind color */
  --dark-ink: rgb(255,255,255); /* @kind color */
  --dark-primary: rgb(100,100,100); /* @kind color */
  --dark-secondary: rgb(63,63,63); /* @kind color */
  --fill-colorfilltertiary: rgba(0,0,0,0.04); /* @kind color */
  --light-action: rgb(15,119,240); /* @kind color */
  --light-alt: rgb(80,85,92); /* @kind color */
  --light-ink: rgb(0,0,0); /* @kind color */
  --light-primary: rgb(255,255,255); /* @kind color */
  --light-secondary: rgb(174,179,190); /* @kind color */
  --outline-border: rgb(123,97,255); /* @kind color */
  --outline-fill: rgba(123,97,255,0.1); /* @kind color */
  --pink: rgb(242,35,159); /* @kind color */
  --primary-colorprimary: rgb(22,119,255); /* @kind color */
  --primary-colorprimaryhover: rgb(64,150,255); /* @kind color */
  --space-margin-marginxs: 8;
  --surface-accent-1: var(--pink); /* @kind color */
  --surface-accent-2: var(--yellow); /* @kind color */
  --surface-background: var(--color-purple-15); /* @kind color */
  --surface-blur: var(--color-purple-700); /* @kind color */
  --surface-button-large: var(--color-purple-40); /* @kind color */
  --surface-button: var(--color-purple-10); /* @kind color */
  --surface-glass-effect: var(--color-purple-25); /* @kind color */
  --surface-icon-primary: var(--color-grey-200); /* @kind color */
  --surface-icon-secondary: var(--color-purple-100); /* @kind color */
  --surface-icon-tertiary: var(--color-blue-100); /* @kind color */
  --surface-play-button-player: var(--color-purple-500); /* @kind color */
  --surface-play-button: var(--color-purple-600); /* @kind color */
  --surface-tab-bar: var(--color-blue-300); /* @kind color */
  --surface-tag: var(--color-blue-200); /* @kind color */
  --text-accent-1: var(--pink); /* @kind color */
  --text-accent-2: var(--yellow); /* @kind color */
  --text-accent: var(--white); /* @kind color */
  --text-button: var(--color-grey-200); /* @kind color */
  --text-lightmode-colortext: var(--colors-black-9); /* @kind color */
  --text-lightmode-colortextdisabled: var(--colors-black-5); /* @kind color */
  --text-primary: var(--color-grey-100); /* @kind color */
  --text-secondary: var(--color-purple-100); /* @kind color */
  --text-tertiary: var(--color-purple-800); /* @kind color */
  --white: rgb(255,255,255); /* @kind color */
  --yellow: rgb(236,164,80); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --background-colorbgcontainer: rgb(38,38,44); /* @kind color */
  --background-colorbgcontainerdisabled: var(--fill-colorfilltertiary); /* @kind color */
  --border-colorborder: rgb(80,80,93); /* @kind color */
  --colors-black-5: rgb(255,255,255); /* @kind color */
  --colors-black-9: rgb(255,255,255); /* @kind color */
  --colors-white-2: rgb(255,255,255); /* @kind color */
  --colors-white-6: rgb(255,255,255); /* @kind color */
  --colors-white-7: rgb(255,255,255); /* @kind color */
  --fill-colorfilltertiary: rgba(255,255,255,0.04); /* @kind color */
  --primary-colorprimary: rgb(22,104,220); /* @kind color */
  --primary-colorprimaryhover: rgb(60,137,232); /* @kind color */
  --text-lightmode-colortext: var(--colors-white-6); /* @kind color */
  --text-lightmode-colortextdisabled: var(--colors-white-2); /* @kind color */
}