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

:root {
  --colors-background-bg-primary-hover: var(--colors-gray-light-mode-50); /* @kind color */
  --colors-background-bg-primary: var(--colors-base-white); /* @kind color */
  --colors-background-bg-quaternary: var(--colors-gray-light-mode-200); /* @kind color */
  --colors-base-white: rgb(255,255,255); /* @kind color */
  --colors-border-border-secondary: var(--colors-gray-light-mode-200); /* @kind color */
  --colors-border-border-tertiary: var(--colors-gray-light-mode-100); /* @kind color */
  --colors-brand-500: rgb(158,119,237); /* @kind color */
  --colors-brand-600: rgb(127,86,217); /* @kind color */
  --colors-brand-700: rgb(105,65,198); /* @kind color */
  --colors-error-400: rgb(249,112,102); /* @kind color */
  --colors-error-500: rgb(240,68,56); /* @kind color */
  --colors-error-600: rgb(217,45,32); /* @kind color */
  --colors-foreground-fg-brand-primary-600: var(--colors-brand-600); /* @kind color */
  --colors-foreground-fg-brand-primary-alt: var(--colors-brand-600); /* @kind color */
  --colors-foreground-fg-disabled-subtle: var(--colors-gray-light-mode-300); /* @kind color */
  --colors-foreground-fg-error-primary: var(--colors-error-600); /* @kind color */
  --colors-foreground-fg-primary-900: var(--colors-gray-light-mode-900); /* @kind color */
  --colors-foreground-fg-quarterary-500: var(--colors-gray-light-mode-500); /* @kind color */
  --colors-foreground-fg-quarterary-hover: var(--colors-gray-light-mode-600); /* @kind color */
  --colors-gray-dark-mode-300: rgb(206,207,210); /* @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-600: rgb(97,100,108); /* @kind color */
  --colors-gray-dark-mode-700: rgb(51,55,65); /* @kind color */
  --colors-gray-dark-mode-800: rgb(31,36,47); /* @kind color */
  --colors-gray-dark-mode-950: rgb(12,17,29); /* @kind color */
  --colors-gray-light-mode-100: rgb(242,244,247); /* @kind color */
  --colors-gray-light-mode-200: rgb(234,236,240); /* @kind color */
  --colors-gray-light-mode-300: rgb(208,213,221); /* @kind color */
  --colors-gray-light-mode-500: rgb(102,112,133); /* @kind color */
  --colors-gray-light-mode-50: rgb(249,250,251); /* @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-brand-secondary-700: var(--colors-brand-700); /* @kind color */
  --colors-text-text-error-primary-600: var(--colors-error-600); /* @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 */
  --component-colors-components-avatars-avatar-contrast-border: rgba(0,0,0,0.08); /* @kind color */
  --container-max-width-desktop: var(--spacing-320-1-280px);
  --container-padding-desktop: var(--spacing-8-32px);
  --paragraph-max-width: var(--spacing-180-720px);
  --radius-full: 9999;
  --radius-lg: 10;
  --radius-md: 8;
  --spacing-0-5-2px: 2;
  --spacing-1-4px: 4;
  --spacing-12-48px: 48;
  --spacing-16-64px: 64;
  --spacing-180-720px: 720;
  --spacing-192-768px: 768;
  --spacing-2-8px: 8;
  --spacing-24-96px: 96;
  --spacing-2xl: var(--spacing-5-20px);
  --spacing-3-12px: 12;
  --spacing-320-1-280px: 1280;
  --spacing-3xl: var(--spacing-6-24px);
  --spacing-4-16px: 16;
  --spacing-4xl: var(--spacing-8-32px);
  --spacing-5-20px: 20;
  --spacing-6-24px: 24;
  --spacing-6xl: var(--spacing-12-48px);
  --spacing-7xl: var(--spacing-16-64px);
  --spacing-8-32px: 32;
  --spacing-9xl: var(--spacing-24-96px);
  --spacing-lg: var(--spacing-3-12px);
  --spacing-md: var(--spacing-2-8px);
  --spacing-xl: var(--spacing-4-16px);
  --spacing-xs: var(--spacing-1-4px);
  --spacing-xxs: var(--spacing-0-5-2px);
  --width-xl: var(--spacing-192-768px);
}

:root[data-theme="dark"], .dark {
  --colors-background-bg-primary-hover: var(--colors-gray-dark-mode-800); /* @kind color */
  --colors-background-bg-primary: var(--colors-gray-dark-mode-950); /* @kind color */
  --colors-background-bg-quaternary: var(--colors-gray-dark-mode-700); /* @kind color */
  --colors-border-border-secondary: var(--colors-gray-dark-mode-800); /* @kind color */
  --colors-border-border-tertiary: var(--colors-gray-dark-mode-800); /* @kind color */
  --colors-foreground-fg-brand-primary-600: var(--colors-brand-500); /* @kind color */
  --colors-foreground-fg-brand-primary-alt: var(--colors-gray-dark-mode-300); /* @kind color */
  --colors-foreground-fg-disabled-subtle: var(--colors-gray-dark-mode-600); /* @kind color */
  --colors-foreground-fg-error-primary: var(--colors-error-500); /* @kind color */
  --colors-foreground-fg-primary-900: var(--colors-base-white); /* @kind color */
  --colors-foreground-fg-quarterary-500: var(--colors-gray-dark-mode-400); /* @kind color */
  --colors-foreground-fg-quarterary-hover: var(--colors-gray-dark-mode-300); /* @kind color */
  --colors-text-text-brand-secondary-700: var(--colors-gray-dark-mode-300); /* @kind color */
  --colors-text-text-error-primary-600: var(--colors-error-400); /* @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 */
  --component-colors-components-avatars-avatar-contrast-border: rgba(255,255,255,0.12); /* @kind color */
}