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

:root {
  --base-white: rgb(255,255,255); /* @kind color */
  --brand-100: rgb(245,245,245); /* @kind color */
  --brand-900: rgb(30,30,30); /* @kind color */
  --color-neutral-darkest: rgb(0,0,0); /* @kind color */
  --color-scheme-1-background-2: var(--color-white-2); /* @kind color */
  --color-scheme-1-background: var(--color-white); /* @kind color */
  --color-scheme-1-border: var(--color-neutral-darkest); /* @kind color */
  --color-scheme-1-text: var(--color-neutral-darkest); /* @kind color */
  --color-white-2: rgb(255,255,255); /* @kind color */
  --color-white: rgb(255,255,255); /* @kind color */
  --interactive-button-primary-content: var(--base-white); /* @kind color */
  --max-width-max-width-large: 768;
  --miscellaneous-alert-menu-action-sheet-separators: rgba(128,128,128,0.55); /* @kind color */
  --page-padding-padding-global-2: 64;
  --page-padding-padding-global: 64;
  --primary-500: rgb(0,71,255); /* @kind color */
  --radius-small: 0;
  --section-padding-padding-section-large: 112;
  --slate-50: rgb(255,255,255); /* @kind color */
  --slate-900: rgb(25,24,71); /* @kind color */
  --stroke-border-width: 1;
  --text-brand-on-brand-secondary: var(--brand-900); /* @kind color */
  --text-sizes-text-medium: 18;
  --text-sizes-text-regular: 16;
}

:root[data-mode="mobile"] {
  --max-width-max-width-large: 768;
  --page-padding-padding-global-2: 20;
  --page-padding-padding-global: 20;
  --section-padding-padding-section-large: 64;
  --text-sizes-text-medium: 16;
  --text-sizes-text-regular: 16;
}

:root[data-theme="dark"], .dark {
  --interactive-button-primary-content: var(--primary-500); /* @kind color */
  --miscellaneous-alert-menu-action-sheet-separators: rgba(128,128,128,0.7); /* @kind color */
  --miscellaneous-alert-menu-action-sheet-separators: rgba(128,128,128,0.7); /* @kind color */
  --miscellaneous-alert-menu-action-sheet-separators: rgba(128,128,128,0.74); /* @kind color */
  --miscellaneous-alert-menu-action-sheet-separators: rgba(128,128,128,0.74); /* @kind color */
  --text-brand-on-brand-secondary: var(--brand-100); /* @kind color */
}

:root[data-theme="light"], .light {
  --miscellaneous-alert-menu-action-sheet-separators: rgba(128,128,128,0.7); /* @kind color */
}