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

:root {
  --border-color-invert: var(--brand-black); /* @kind color */
  --border-color-primary: var(--gray-100); /* @kind color */
  --border-color-secondary: var(--gray-200); /* @kind color */
  --border-color-tertiary: var(--gray-300); /* @kind color */
  --border-radius-radius-base: 4;
  --border-radius-radius-full: 9999;
  --border-radius-radius-lg: 8;
  --border-radius-radius-md: 6;
  --border-width-2: var(--numbers-2);
  --brand-black: rgb(12,12,12); /* @kind color */
  --brand-mint-green: rgb(149,218,185); /* @kind color */
  --brand-clay: #C6592A; /* @kind color */
  --brand-primary-black: rgb(12,12,12); /* @kind color */
  --brand-primary-white: rgb(255,255,255); /* @kind color */
  --brand-white: rgb(255,255,255); /* @kind color */
  --color-brand-black: rgb(17,17,17); /* @kind color */
  --color-brand-white-2: rgb(255,255,255); /* @kind color */
  --color-brand-white: rgb(255,255,255); /* @kind color */
  --colors-brand-gradient-background-2: rgb(27,28,28); /* @kind color */
  --colors-brand-gradient-light-2: rgb(194,202,202); /* @kind color */
  --colors-brand-primary-dark-green: rgb(53,75,79); /* @kind color */
  --colors-brand-primary-white: rgb(255,255,255); /* @kind color */
  --components-button-critical-hover: var(--red-700); /* @kind color */
  --components-button-critical-pressed: var(--red-700); /* @kind color */
  --components-button-critical: var(--red-500); /* @kind color */
  --components-button-primary-pressed: var(--gray-900); /* @kind color */
  --components-button-primary: var(--brand-black); /* @kind color */
  --components-button-secondary-pressed: var(--gray-100); /* @kind color */
  --components-button-secondary: var(--brand-white); /* @kind color */
  --components-button-tertiary-pressed: var(--gray-200); /* @kind color */
  --components-button-text-primary: var(--brand-white); /* @kind color */
  --components-button-text-secundary: var(--brand-black); /* @kind color */
  --font-family-body: "Barlow";
  --font-family-heading: "Barlow";
  --font-weight-medium: "Medium";
  --font-weight-semibold: "SemiBold";
  --gray-1000: rgb(27,27,27); /* @kind color */
  --gray-100: rgb(241,241,241); /* @kind color */
  --gray-200: rgb(226,226,226); /* @kind color */
  --gray-300: rgb(198,198,198); /* @kind color */
  --gray-400: rgb(171,171,171); /* @kind color */
  --gray-500: rgb(145,145,145); /* @kind color */
  --gray-600: rgb(119,119,119); /* @kind color */
  --gray-700: rgb(94,94,94); /* @kind color */
  --gray-800: rgb(71,71,71); /* @kind color */
  --gray-900: rgb(48,48,48); /* @kind color */
  --green-500: rgb(34,197,94); /* @kind color */
  --icon-disabled: var(--gray-400); /* @kind color */
  --icon-invert: var(--brand-white); /* @kind color */
  --icon-primary: var(--gray-1000); /* @kind color */
  --inline-icon-xl: 20; /* @kind spacing */
  --neutral-0: rgb(255,255,255); /* @kind color */
  --numbers-2: 2; /* @kind spacing */
  --orange-500: rgb(249,115,22); /* @kind color */
  --padding-padding-base: 16;
  --padding-padding-md: 24;
  --padding-padding-xs: 8;
  --red-500: rgb(239,68,68); /* @kind color */
  --red-700: rgb(185,28,28); /* @kind color */
  --spacing-0: 0;
  --spacing-12: 12;
  --spacing-16: 16;
  --spacing-24: 24;
  --spacing-40: 40;
  --spacing-4: 4;
  --spacing-8: 8;
  --stop-2: var(--colors-brand-primary-dark-green); /* @kind color */
  --surface-critical: var(--red-500); /* @kind color */
  --surface-primary-2: var(--brand-white); /* @kind color */
  --surface-primary: var(--brand-white); /* @kind color */
  --surface-secondary: var(--gray-100); /* @kind color */
  --surface-success: var(--green-500); /* @kind color */
  --surface-warning: var(--orange-500); /* @kind color */
  --text-invert: var(--brand-white); /* @kind color */
  --text-primary-2: var(--gray-1000); /* @kind color */
  --text-primary: var(--gray-1000); /* @kind color */
  --text-secondary: var(--gray-800); /* @kind color */
  --text-success: var(--green-500); /* @kind color */
  --text-tertiary: var(--gray-500); /* @kind color */
  --text-text-primary: var(--color-brand-black); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --border-color-invert: var(--neutral-0); /* @kind color */
  --border-color-primary: var(--gray-1000); /* @kind color */
  --border-color-secondary: var(--gray-900); /* @kind color */
  --border-color-tertiary: var(--gray-800); /* @kind color */
  --border-radius-radius-base: 4;
  --border-radius-radius-full: 9999;
  --border-radius-radius-lg: 8;
  --border-radius-radius-md: 6;
  --border-width-2: var(--numbers-2);
  --components-button-critical-hover: var(--red-700); /* @kind color */
  --components-button-critical-pressed: var(--red-700); /* @kind color */
  --components-button-critical: var(--red-500); /* @kind color */
  --components-button-primary-pressed: var(--gray-100); /* @kind color */
  --components-button-primary: var(--brand-white); /* @kind color */
  --components-button-secondary-pressed: var(--gray-900); /* @kind color */
  --components-button-secondary: var(--gray-1000); /* @kind color */
  --components-button-tertiary-pressed: var(--gray-1000); /* @kind color */
  --components-button-text-primary: var(--brand-black); /* @kind color */
  --components-button-text-secundary: var(--brand-white); /* @kind color */
  --icon-disabled: var(--gray-700); /* @kind color */
  --icon-invert: var(--brand-black); /* @kind color */
  --icon-primary: var(--brand-white); /* @kind color */
  --spacing-0: 0;
  --spacing-12: 12;
  --spacing-16: 16;
  --spacing-24: 24;
  --spacing-40: 40;
  --spacing-4: 4;
  --spacing-8: 8;
  --surface-critical: var(--red-500); /* @kind color */
  --surface-primary-2: var(--gray-1000); /* @kind color */
  --surface-primary: var(--gray-1000); /* @kind color */
  --surface-secondary: var(--gray-900); /* @kind color */
  --surface-success: var(--green-500); /* @kind color */
  --surface-warning: var(--orange-500); /* @kind color */
  --text-invert: var(--brand-black); /* @kind color */
  --text-primary-2: var(--brand-white); /* @kind color */
  --text-primary: var(--brand-white); /* @kind color */
  --text-secondary: var(--gray-300); /* @kind color */
  --text-success: var(--green-500); /* @kind color */
  --text-tertiary: var(--gray-600); /* @kind color */
}

:root[data-theme="light"], .light {
  --stop-2: var(--colors-brand-gradient-light-2); /* @kind color */
}

:root[data-mode="background-gradient"] {
  --stop-2: var(--colors-brand-gradient-background-2); /* @kind color */
}