:root {
    --text-sm-semibold-font-family: "Inter", Helvetica;
    --text-sm-semibold-font-weight: 600;
    --text-sm-semibold-font-size: 14px;
    --text-sm-semibold-letter-spacing: 0px;
    --text-sm-semibold-line-height: 20px;
    --text-sm-semibold-font-style: normal;
    --display-xs-semibold-font-family: "Inter", Helvetica;
    --display-xs-semibold-font-weight: 600;
    --display-xs-semibold-font-size: 24px;
    --display-xs-semibold-letter-spacing: 0px;
    --display-xs-semibold-line-height: 32px;
    --display-xs-semibold-font-style: normal;
    --text-md-semibold-font-family: "Inter", Helvetica;
    --text-md-semibold-font-size: 16px;
    --text-md-semibold-font-weight: 600;
    --text-md-semibold-line-height: 24px;
    --text-md-semibold-letter-spacing: 0;
    --text-md-semibold-font-style: normal;
    --text-lg-semibold-font-family: "Inter", Helvetica;
    --text-lg-semibold-font-weight: 600;
    --text-lg-semibold-font-size: 18px;
    --text-lg-semibold-letter-spacing: 0px;
    --text-lg-semibold-line-height: 28px;
    --text-lg-semibold-font-style: normal;
    --text-sm-medium-font-family: "Inter", Helvetica;
    --text-sm-medium-font-weight: 500;
    --text-sm-medium-font-size: 14px;
    --text-sm-medium-letter-spacing: 0px;
    --text-sm-medium-line-height: 20px;
    --text-sm-medium-font-style: normal;
    --text-md-regular-font-family: "Inter", Helvetica;
    --text-md-regular-font-weight: 400;
    --text-md-regular-font-size: 16px;
    --text-md-regular-letter-spacing: 0px;
    --text-md-regular-line-height: 24px;
    --text-md-regular-font-style: normal;
    --text-sm-regular-font-family: "Inter", Helvetica;
    --text-sm-regular-font-weight: 400;
    --text-sm-regular-font-size: 14px;
    --text-sm-regular-letter-spacing: 0px;
    --text-sm-regular-line-height: 20px;
    --text-sm-regular-font-style: normal;
    --text-xs-semibold-font-family: "Inter", Helvetica;
    --text-xs-semibold-font-weight: 600;
    --text-xs-semibold-font-size: 12px;
    --text-xs-semibold-letter-spacing: 0px;
    --text-xs-semibold-line-height: 18px;
    --text-xs-semibold-font-style: normal;
    --text-xs-medium-font-family: "Inter", Helvetica;
    --text-xs-medium-font-weight: 500;
    --text-xs-medium-font-size: 12px;
    --text-xs-medium-letter-spacing: 0px;
    --text-xs-medium-line-height: 18px;
    --text-xs-medium-font-style: normal;
    --shadows-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    --shadows-shadow-sm: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    --shadows-shadow-xs-skeuomorphic: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    --a1-color-modes-colors-background-bg-primary: var( --primitives-colors-base-white );
    --a1-color-modes-colors-text-text-quaternary-500: var( --primitives-colors-gray-light-mode-500 );
    --a1-color-modes-colors-text-text-tertiary-hover: var( --primitives-colors-gray-light-mode-700 );
    --a1-color-modes-colors-text-text-primary-900: var( --primitives-colors-gray-light-mode-900 );
    --a1-color-modes-colors-text-text-secondary-700: var( --primitives-colors-gray-light-mode-700 );
    --a1-color-modes-colors-text-text-disabled: var( --primitives-colors-gray-light-mode-500 );
    --a1-color-modes-colors-text-text-tertiary-600: var( --primitives-colors-gray-light-mode-600 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-700: var( --primitives-colors-brand-700 );
    --a1-color-modes-colors-text-text-brand-secondary-700: var( --primitives-colors-brand-700 );
    --a1-color-modes-colors-background-bg-secondary: var(--primitives-colors-gray-light-mode-50 );
    --a1-color-modes-colors-border-border-secondary: var( --primitives-colors-gray-light-mode-200 );
    --a1-color-modes-colors-border-border-primary: var( --primitives-colors-gray-light-mode-300 );
    --a1-color-modes-colors-foreground-fg-brand-primary-alt: var( --a1-color-modes-colors-foreground-fg-brand-primary-600 );
    --a1-color-modes-colors-background-bg-primary-hover: var( --primitives-colors-gray-light-mode-50 );
    --a1-color-modes-colors-background-bg-primary-alt: var( --primitives-colors-base-white );
    --a1-color-modes-colors-background-bg-secondary-alt: var( --primitives-colors-gray-light-mode-50 );
    --a1-color-modes-colors-foreground-fg-brand-primary-600: var( --primitives-colors-brand-600 );
    --a1-color-modes-colors-background-bg-disabled-subtle: var( --primitives-colors-gray-light-mode-50 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-50: var( --primitives-colors-brand-50 );
    --a1-color-modes-colors-border-border-disabled: var( --primitives-colors-gray-light-mode-300 );
    --a1-color-modes-component-colors-utility-gray-utility-gray-200: var( --primitives-colors-gray-light-mode-200 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-200: var( --primitives-colors-brand-200 );
    --a1-color-modes-colors-background-bg-brand-solid: #39836f;
    --a1-color-modes-colors-text-text-white: #FFFFFF;
    --a1-color-modes-colors-background-bg-primary: #FFFFFF;
    --primitives-colors-gray-light-mode-500: rgba(113, 118, 128, 1);
    --primitives-colors-gray-light-mode-700: rgba(65, 70, 81, 1);
    --primitives-colors-gray-light-mode-900: rgba(24, 29, 39, 1);
    --primitives-colors-gray-light-mode-600: rgba(83, 88, 98, 1);
    --primitives-colors-brand-700: rgba(46, 111, 95, 1);
    --primitives-spacing-2-8px: 8px;
    --primitives-spacing-3-12px: 12px;
    --primitives-spacing-1-5-6px: 6px;
    --primitives-colors-gray-dark-mode-950: rgba(12, 14, 18, 1);
    --primitives-spacing-6-24px: 24px;
    --primitives-spacing-0-5-2px: 2px;
    --primitives-spacing-1-4px: 4px;
    --primitives-spacing-4-16px: 16px;
    --primitives-colors-base-white: #FFFFFF;
    --primitives-colors-gray-dark-mode-50: rgba(247, 247, 247, 1);
    --primitives-colors-gray-dark-mode-300: rgba(206, 207, 210, 1);
    --primitives-colors-gray-dark-mode-500: rgba(133, 136, 142, 1);
    --primitives-colors-gray-dark-mode-400: rgba(148, 151, 156, 1);
    --primitives-colors-gray-light-mode-200: rgba(233, 234, 235, 1);
    --primitives-colors-brand-300: rgba(134, 201, 183, 1);
    --primitives-colors-gray-light-mode-50: #fafafa;
    --primitives-colors-gray-light-mode-300: rgba(213, 215, 218, 1);
    --primitives-spacing-5-20px: 20px;
    --primitives-colors-gray-dark-mode-800: rgba(34, 38, 47, 1);
    --primitives-colors-gray-dark-mode-900: rgba(19, 22, 27, 1);
    --primitives-colors-brand-600: rgba(57, 131, 111, 1);
    --primitives-colors-brand-50: rgba(217, 241, 236, 1);
    --primitives-colors-gray-dark-mode-700: rgba(55, 58, 65, 1);
    --primitives-colors-brand-200: rgba(155, 208, 195, 1);
    --primitives-colors-brand-500: rgba(75, 156, 137, 1);
    --primitives-colors-brand-950: rgba(18, 52, 45, 1);
    --primitives-colors-brand-800: rgba(37, 92, 79, 1);
    --primitives-spacing-8-32px: 32px;
    --primitives-spacing-6-24px-duplicate: 24px;
    --primitives-spacing-12-48px: 48px;
    --a3-spacing-spacing-md: var(--primitives-spacing-2-8px);
    --a3-spacing-spacing-lg: var(--primitives-spacing-3-12px);
    --a3-spacing-spacing-sm: var(--primitives-spacing-1-5-6px);
    --a3-spacing-spacing-3xl: var(--primitives-spacing-6-24px);
    --a3-spacing-spacing-xxs: var(--primitives-spacing-0-5-2px);
    --a3-spacing-spacing-xs: var(--primitives-spacing-1-4px);
    --a3-spacing-spacing-xl: var(--primitives-spacing-4-16px);
    --a3-spacing-spacing-2xl: var(--primitives-spacing-5-20px);
    --a3-spacing-spacing-4xl: var(--primitives-spacing-8-32px);
    --a3-spacing-spacing-3xl-duplicate: var(--primitives-spacing-6-24px-duplicate);
    --a3-spacing-spacing-6xl: var(--primitives-spacing-12-48px);
    --a2-radius-radius-sm: 6px;
    --a2-radius-radius-md: 8px;
    --a2-radius-radius-lg: 12px;
    --a2-radius-radius-full: 9999px;
    --a2-radius-radius-xl: 12px;
    --a2-radius-radius-xl-duplicate: 12px;
}
/* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: <body data-1-color-modes-mode="light-mode"> <!-- the rest of your content --> </body> You can apply the theme on any DOM node, not just the body */

[data-1-color-modes-mode="light-mode"] {
    --a1-color-modes-colors-background-bg-primary: var( --primitives-colors-base-white );
    --a1-color-modes-colors-text-text-quaternary-500: var( --primitives-colors-gray-light-mode-500 );
    --a1-color-modes-colors-text-text-tertiary-hover: var( --primitives-colors-gray-light-mode-700 );
    --a1-color-modes-colors-text-text-primary-900: var( --primitives-colors-gray-light-mode-900 );
    --a1-color-modes-colors-text-text-secondary-700: var( --primitives-colors-gray-light-mode-700 );
    --a1-color-modes-colors-text-text-disabled: var( --primitives-colors-gray-light-mode-500 );
    --a1-color-modes-colors-text-text-tertiary-600: var( --primitives-colors-gray-light-mode-600 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-700: var( --primitives-colors-brand-700 );
    --a1-color-modes-colors-text-text-brand-secondary-700: var( --primitives-colors-brand-700 );
    --a1-color-modes-colors-border-border-secondary: var( --primitives-colors-gray-light-mode-200 );
    --a1-color-modes-colors-background-bg-secondary: var( --primitives-colors-gray-light-mode-50 );
    --a1-color-modes-colors-border-border-primary: var( --primitives-colors-gray-light-mode-300 );
    --a1-color-modes-colors-foreground-fg-brand-primary-alt: var( --a1-color-modes-colors-foreground-fg-brand-primary-600 );
    --a1-color-modes-colors-background-bg-primary-hover: var( --primitives-colors-gray-light-mode-50 );
    --a1-color-modes-colors-foreground-fg-brand-primary-600: var( --primitives-colors-brand-600 );
    --a1-color-modes-colors-background-bg-disabled-subtle: var( --primitives-colors-gray-light-mode-50 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-50: var( --primitives-colors-brand-50 );
    --a1-color-modes-colors-border-border-disabled: var( --primitives-colors-gray-light-mode-300 );
    --a1-color-modes-component-colors-utility-gray-utility-gray-200: var( --primitives-colors-gray-light-mode-200 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-200: var( --primitives-colors-brand-200 );
}

[data-1-color-modes-mode="dark-mode"] {
    --a1-color-modes-colors-background-bg-primary: var( --primitives-colors-gray-dark-mode-950 );
    --a1-color-modes-colors-text-text-quaternary-500: var( --primitives-colors-gray-dark-mode-400 );
    --a1-color-modes-colors-text-text-tertiary-hover: var( --primitives-colors-gray-dark-mode-300 );
    --a1-color-modes-colors-text-text-primary-900: var( --primitives-colors-gray-dark-mode-50 );
    --a1-color-modes-colors-text-text-secondary-700: var( --primitives-colors-gray-dark-mode-300 );
    --a1-color-modes-colors-text-text-disabled: var( --primitives-colors-gray-dark-mode-500 );
    --a1-color-modes-colors-text-text-tertiary-600: var( --primitives-colors-gray-dark-mode-400 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-700: var( --primitives-colors-brand-300 );
    --a1-color-modes-colors-text-text-brand-secondary-700: var( --primitives-colors-gray-dark-mode-300 );
    --a1-color-modes-colors-border-border-secondary: var( --primitives-colors-gray-dark-mode-800 );
    --a1-color-modes-colors-background-bg-secondary: var( --primitives-colors-gray-dark-mode-900 );
    --a1-color-modes-colors-border-border-primary: var( --primitives-colors-gray-dark-mode-700 );
    --a1-color-modes-colors-foreground-fg-brand-primary-alt: var( --primitives-colors-gray-dark-mode-300 );
    --a1-color-modes-colors-background-bg-primary-hover: var( --primitives-colors-gray-dark-mode-800 );
    --a1-color-modes-colors-foreground-fg-brand-primary-600: var( --primitives-colors-brand-500 );
    --a1-color-modes-colors-background-bg-disabled-subtle: var( --primitives-colors-gray-dark-mode-900 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-50: var( --primitives-colors-brand-950 );
    --a1-color-modes-colors-border-border-disabled: var( --primitives-colors-gray-dark-mode-700 );
    --a1-color-modes-component-colors-utility-gray-utility-gray-200: var( --primitives-colors-gray-dark-mode-700 );
    --a1-color-modes-component-colors-utility-brand-utility-brand-200: var( --primitives-colors-brand-800 );
}