:root {
    --brand-700: rgba(105, 65, 198, 1);
    --basewhite: rgba(255, 255, 255, 1);
    --gray-700: rgba(52, 64, 84, 1);
    --gray-900: rgba(16, 24, 40, 1);
    --gray-600: rgba(71, 84, 103, 1);
    --gray-500: rgba(102, 112, 133, 1);
    --gray-300: rgba(208, 213, 221, 1);
    --gray-50: rgba(249, 250, 251, 1);
    --gray-200: rgba(234, 236, 240, 1);
    --gray-100: rgba(242, 244, 247, 1);
    --text-md-semibold-font-family: "Inter", Helvetica;
    --text-md-semibold-font-weight: 600;
    --text-md-semibold-font-size: 16px;
    --text-md-semibold-letter-spacing: 0px;
    --text-md-semibold-line-height: 24px;
    --text-md-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;
    --display-xl-semibold-font-family: "Inter", Helvetica;
    --display-xl-semibold-font-weight: 600;
    --display-xl-semibold-font-size: 60px;
    --display-xl-semibold-letter-spacing: -1.2px;
    --display-xl-semibold-line-height: 72px;
    --display-xl-semibold-font-style: normal;
    --text-xl-regular-font-family: "Inter", Helvetica;
    --text-xl-regular-font-weight: 400;
    --text-xl-regular-font-size: 20px;
    --text-xl-regular-letter-spacing: 0px;
    --text-xl-regular-line-height: 30px;
    --text-xl-regular-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-md-medium-font-family: "Inter", Helvetica;
    --text-md-medium-font-weight: 500;
    --text-md-medium-font-size: 16px;
    --text-md-medium-letter-spacing: 0px;
    --text-md-medium-line-height: 24px;
    --text-md-medium-font-style: normal;
    --display-md-semibold-font-family: "Inter", Helvetica;
    --display-md-semibold-font-weight: 600;
    --display-md-semibold-font-size: 36px;
    --display-md-semibold-letter-spacing: -0.72px;
    --display-md-semibold-line-height: 44px;
    --display-md-semibold-font-style: normal;
    --text-lg-regular-font-family: "Inter", Helvetica;
    --text-lg-regular-font-weight: 400;
    --text-lg-regular-font-size: 18px;
    --text-lg-regular-letter-spacing: 0px;
    --text-lg-regular-line-height: 28px;
    --text-lg-regular-font-style: normal;
    --display-sm-semibold-font-family: "Inter", Helvetica;
    --display-sm-semibold-font-weight: 600;
    --display-sm-semibold-font-size: 30px;
    --display-sm-semibold-letter-spacing: 0px;
    --display-sm-semibold-line-height: 38px;
    --display-sm-semibold-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-lg-medium-font-family: "Inter", Helvetica;
    --text-lg-medium-font-weight: 500;
    --text-lg-medium-font-size: 18px;
    --text-lg-medium-letter-spacing: 0px;
    --text-lg-medium-line-height: 28px;
    --text-lg-medium-font-style: normal;
    --text-xl-semibold-font-family: "Inter", Helvetica;
    --text-xl-semibold-font-weight: 600;
    --text-xl-semibold-font-size: 20px;
    --text-xl-semibold-letter-spacing: 0px;
    --text-xl-semibold-line-height: 30px;
    --text-xl-semibold-font-style: normal;
    --text-md-regular-underlined-font-family: "Inter", Helvetica;
    --text-md-regular-underlined-font-weight: 400;
    --text-md-regular-underlined-font-size: 16px;
    --text-md-regular-underlined-letter-spacing: 0px;
    --text-md-regular-underlined-line-height: 24px;
    --text-md-regular-underlined-font-style: normal;

 /*

    */
    --3-spacing-spacing-7xl: var(--primitives-spacing-16-64px);
    --text-md-semibold-font-family: "Inter", Helvetica;
    --text-md-semibold-font-weight: 600;
    --text-md-semibold-font-size: 16px;
    --text-md-semibold-letter-spacing: 0px;
    --text-md-semibold-line-height: 24px;
    --text-md-semibold-font-style: normal;
    --display-lg-semibold-font-family: "Inter", Helvetica;
    --display-lg-semibold-font-weight: 600;
    --display-lg-semibold-font-size: 48px;
    --display-lg-semibold-letter-spacing: -0.96px;
    --display-lg-semibold-line-height: 60px;
    --display-lg-semibold-font-style: normal;
    --text-xl-regular-font-family: "Inter", Helvetica;
    --text-xl-regular-font-weight: 400;
    --text-xl-regular-font-size: 20px;
    --text-xl-regular-letter-spacing: 0px;
    --text-xl-regular-line-height: 30px;
    --text-xl-regular-font-style: normal;
    --3-spacing-spacing-6xl: var(--primitives-spacing-12-48px);
    --3-spacing-spacing-lg: var(--primitives-spacing-3-12px);
    --3-spacing-spacing-3xl: var(--primitives-spacing-6-24px);
    --primitives-spacing-12-48px: 48px;
    --primitives-colors-gray-light-mode-900: rgba(24, 29, 39, 1);
    --primitives-spacing-3-12px: 12px;
    --primitives-colors-gray-dark-mode-50: rgba(247, 247, 247, 1);
    --primitives-spacing-6-24px: 24px;
    --primitives-spacing-192-768px: 768px;
    --1-color-modes-colors-text-text-primary-900: var(
        --primitives-colors-gray-light-mode-900
    );
    --4-widths-width-xl: var(--primitives-spacing-192-768px);
    /*

    */

    --1-color-modes-colors-background-bg-secondary: var(
        --primitives-colors-gray-light-mode-50
    );


    --2-radius-radius-lg: 10px;

    --1-color-modes-colors-background-bg-primary: var(
        --primitives-colors-base-white
    );


    --display-md-semibold-font-family: "Inter", Helvetica;
    --display-md-semibold-font-weight: 600;
    --display-md-semibold-font-size: 36px;
    --display-md-semibold-letter-spacing: -0.72px;
    --display-md-semibold-line-height: 44px;
    --display-md-semibold-font-style: normal;
    --text-xl-regular-font-family: "Inter", Helvetica;
    --text-xl-regular-font-weight: 400;
    --text-xl-regular-font-size: 20px;
    --text-xl-regular-letter-spacing: 0px;
    --text-xl-regular-line-height: 30px;
    --text-xl-regular-font-style: normal;
    --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-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-md-semibold-font-family: "Inter", Helvetica;
    --text-md-semibold-font-weight: 600;
    --text-md-semibold-font-size: 16px;
    --text-md-semibold-letter-spacing: 0px;
    --text-md-semibold-line-height: 24px;
    --text-md-semibold-font-style: normal;
    --shadows-shadow-xs-skeuomorphic: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    --3-spacing-spacing-7xl: var(--primitives-spacing-16-64px);
    --3-spacing-spacing-9xl: var(--primitives-spacing-24-96px);
    --3-spacing-spacing-xl: var(--primitives-spacing-4-16px);
    --3-spacing-spacing-md: var(--primitives-spacing-2-8px);
    --3-spacing-spacing-lg: var(--primitives-spacing-3-12px);
    --3-spacing-spacing-3xl: var(--primitives-spacing-6-24px);
    --3-spacing-spacing-2xl: var(--primitives-spacing-5-20px);
    --3-spacing-spacing-4xl: var(--primitives-spacing-8-32px);
    --3-spacing-spacing-xs: var(--primitives-spacing-1-4px);
    --3-spacing-spacing-xxs: var(--primitives-spacing-0-5-2px);
    --3-spacing-spacing-sm: var(--primitives-spacing-1-5-6px);
    --primitives-spacing-16-64px: 64px;
    --primitives-spacing-24-96px: 96px;
    --primitives-colors-gray-light-mode-50: rgba(250, 250, 250, 1);
    --primitives-colors-gray-light-mode-900: rgba(24, 29, 39, 1);
    --primitives-colors-gray-light-mode-600: rgba(83, 88, 98, 1);
    --primitives-spacing-4-16px: 16px;
    --primitives-colors-gray-dark-mode-900: rgba(19, 22, 27, 1);
    --primitives-colors-gray-dark-mode-50: rgba(247, 247, 247, 1);
    --primitives-colors-gray-dark-mode-400: rgba(148, 151, 156, 1);
    --primitives-spacing-2-8px: 8px;
    --primitives-spacing-3-12px: 12px;
    --primitives-spacing-6-24px: 24px;
    --primitives-spacing-5-20px: 20px;
    --primitives-spacing-120-480px: 480px;
    --primitives-spacing-8-32px: 32px;
    --primitives-spacing-192-768px: 768px;
    --primitives-spacing-320-1-280px: 1280px;
    --primitives-colors-brand-700: rgba(105, 65, 198, 1);
    --primitives-spacing-1-4px: 4px;
    --primitives-colors-gray-dark-mode-300: rgba(206, 207, 210, 1);
    --primitives-colors-base-white: rgba(255, 255, 255, 1);
    --primitives-spacing-0-5-2px: 2px;
    --primitives-spacing-1-5-6px: 6px;
    --primitives-colors-brand-600: rgba(127, 86, 217, 1);
    --1-color-modes-colors-background-bg-secondary: var(
        --primitives-colors-gray-light-mode-50
    );
    --1-color-modes-colors-text-text-primary-900: var(
        --primitives-colors-gray-light-mode-900
    );
    --1-color-modes-colors-text-text-tertiary-600: var(
        --primitives-colors-gray-light-mode-600
    );
    --1-color-modes-colors-text-text-brand-secondary-700: var(
        --primitives-colors-brand-700
    );
    --1-color-modes-component-colors-components-avatars-avatar-contrast-border: rgba(
        0,
        0,
        0,
        0.08
    );
    --1-color-modes-component-colors-components-buttons-primary-button-primary-fg: var(
        --primitives-colors-base-white
    );
    --1-color-modes-component-colors-components-buttons-primary-button-primary-fg-hover: var(
        --primitives-colors-base-white
    );
    --1-color-modes-component-colors-components-buttons-primary-button-primary-bg-hover: var(
        --primitives-colors-brand-700
    );
    --1-color-modes-component-colors-components-buttons-primary-button-primary-bg: var(
        --primitives-colors-brand-600
    );
    --2-radius-radius-2xl: 16px;
    --2-radius-radius-full: 9999px;
    --2-radius-radius-md: 8px;
    --4-widths-width-sm: var(--primitives-spacing-120-480px);
    --4-widths-width-xl: var(--primitives-spacing-192-768px);
    --5-containers-container-padding-desktop: var(--primitives-spacing-8-32px);
    --5-containers-container-max-width-desktop: var(
        --primitives-spacing-320-1-280px
    );
    
    /*
    
    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"] {
        --1-color-modes-colors-background-bg-secondary: var(
            --primitives-colors-gray-light-mode-50
        );
        --1-color-modes-colors-text-text-primary-900: var(
            --primitives-colors-gray-light-mode-900
        );
        --1-color-modes-colors-text-text-tertiary-600: var(
            --primitives-colors-gray-light-mode-600
        );
        --1-color-modes-colors-text-text-brand-secondary-700: var(
            --primitives-colors-brand-700
        );
        --1-color-modes-component-colors-components-avatars-avatar-contrast-border: rgba(
            0,
            0,
            0,
            0.08
        );
    }
    
    [data-1-color-modes-mode="dark-mode"] {
        --1-color-modes-colors-background-bg-secondary: var(
            --primitives-colors-gray-dark-mode-900
        );
        --1-color-modes-colors-text-text-primary-900: var(
            --primitives-colors-gray-dark-mode-50
        );
        --1-color-modes-colors-text-text-tertiary-600: var(
            --primitives-colors-gray-dark-mode-400
        );
        --1-color-modes-colors-text-text-brand-secondary-700: var(
            --primitives-colors-gray-dark-mode-300
        );
        --1-color-modes-component-colors-components-avatars-avatar-contrast-border: rgba(
            255,
            255,
            255,
            0.12
        );
    }
    













































    

    --shadows-shadow-xs-skeuomorphic: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);





    
    --shadows-shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
    --shadows-shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px
        rgba(16, 24, 40, 0.1);
    --shadows-shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --1-color-modes-colors-text-text-tertiary-600: var(
        --primitives-colors-gray-light-mode-600
    );
    --1-color-modes-colors-background-bg-primary-alt: var(
        --primitives-colors-base-white
    );
    --3-spacing-spacing-3xl: var(--primitives-spacing-6-24px);
    --3-spacing-spacing-4xl: var(--primitives-spacing-8-32px);
    --3-spacing-spacing-9xl: var(--primitives-spacing-24-96px);
    --primitives-colors-gray-light-mode-600: rgba(83, 88, 98, 1);
    --primitives-spacing-6-24px: 24px;
    --primitives-spacing-8-32px: 32px;
    --primitives-spacing-12-80px: 80px;
    --primitives-colors-gray-dark-mode-400: rgba(148, 151, 156, 1);
    --primitives-spacing-320-1-280px: 1280px;
    --primitives-spacing-24-96px: 96px;
    --primitives-spacing-16-64px: 64px;
    --primitives-colors-gray-light-mode-50: rgba(250, 250, 250, 1);

    --primitives-colors-base-white: rgba(255, 255, 255, 1);
    --5-containers-container-padding-desktop: var(--primitives-spacing-12-80px);
    --5-containers-container-max-width-desktop: var(
        --primitives-spacing-320-1-280px
    );
}

/*

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"] {
    --1-color-modes-colors-text-text-tertiary-600: var(
        --primitives-colors-gray-light-mode-600
    );

    

}

[data-1-color-modes-mode="dark-mode"] {
    --1-color-modes-colors-text-text-tertiary-600: var(
        --primitives-colors-gray-dark-mode-400
    );
}