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

:root {
  --backgrounds-primary: rgb(255,255,255); /* @kind color */
  --colors-background-bg-primary: var(--colors-base-white); /* @kind color */
  --colors-base-white: rgb(255,255,255); /* @kind color */
  --colors-border-border-primary: var(--colors-gray-light-mode-300); /* @kind color */
  --colors-gray-dark-mode-400: rgb(148,150,156); /* @kind color */
  --colors-gray-dark-mode-50: rgb(245,245,246); /* @kind color */
  --colors-gray-dark-mode-700: rgb(51,55,65); /* @kind color */
  --colors-gray-dark-mode-950: rgb(12,17,29); /* @kind color */
  --colors-gray-light-mode-300: rgb(208,213,221); /* @kind color */
  --colors-gray-light-mode-600: rgb(71,84,103); /* @kind color */
  --colors-gray-light-mode-900: rgb(16,24,40); /* @kind color */
  --colors-text-text-primary-900: var(--colors-gray-light-mode-900); /* @kind color */
  --colors-text-text-tertiary-600: var(--colors-gray-light-mode-600); /* @kind color */
  --labels-primary: rgb(0,0,0); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --spacing-3-12px: 12;
  --spacing-lg: var(--spacing-3-12px);
}

:root[data-theme="dark"], .dark {
  --backgrounds-primary: rgb(0,0,0); /* @kind color */
  --backgrounds-primary: rgb(28,28,30); /* @kind color */
  --colors-background-bg-primary: var(--colors-gray-dark-mode-950); /* @kind color */
  --colors-border-border-primary: var(--colors-gray-dark-mode-700); /* @kind color */
  --colors-text-text-primary-900: var(--colors-gray-dark-mode-50); /* @kind color */
  --colors-text-text-tertiary-600: var(--colors-gray-dark-mode-400); /* @kind color */
  --labels-primary: rgb(255,255,255); /* @kind color */
  --labels-primary: rgb(255,255,255); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
  --miscellaneous-kit-section-fill: rgb(245,245,245); /* @kind color */
}