.dm-pro-tokens {
    /** Base Colors */
    --blue-violet: #4F3AFD;
    --lavender-mist: #F1E8FD;
    --briliant-rose: #F66093;
    --shocking-pink: #F682F2;
    --grey-0-08a: #00000014;
    --grey-05: #0d0d0d;
    --grey-14: #232323;
    --grey-12: #1E1E1E;
    --grey-26: #414141;
    --grey-38: #606060;
    --grey-46: #767676;
    --grey-67: #ABABAB;
    --grey-66: #A8A8A8;
    --grey-86: #DADADA;
    --grey-91: #E8E8E8;
    --grey-95: #f3f3f3;
    --white: #fff;

    /** Semantic Colors */
    --interaction-color: var(--blue-violet);
    --active-menu-color: var(--interaction-color);
    --active-surface-color: var(--lavender-mist);
    --menu-color: var(--grey-26);
    --body-color: var(--grey-38);
    --heading-color: var(--grey-12);
    --link-color: var(--interaction-color);
    --divider-color: var(--grey-91);
    --text-secondary: var(--grey-38);
    --gradient-text-color: linear-gradient(180deg, #009E8B 0%, #37D804 100%);

    /** Surface Colors */
    --dashboard-surface-background: #fff;
    --toggle-surface-color: var(--grey-46);
    --surface-gradient: linear-gradient(143deg, var(--briliant-rose) 23.13%, var(--shocking-pink) 104.42%);

    /** Shadows */
    --box-shadow: 0px 2px 12px 0px var(--grey-0-08a);
    --bghigh-shadow-light: 0px 8px 15px 0px rgba(0, 0, 0, 0.04), 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
    --box-shadow-card-hover: 0px 1px 8px 0px rgba(79, 58, 253, 0.12), 0px 6px 20px 0px rgba(79, 58, 253, 0.20);
    --box-shadow-card: 0 1px 4px 0 rgba(13, 13, 13, 0.08), 0 4px 12px 0 rgba(13, 13, 13, 0.16);

    /** Status Colors */
    --positive-gradient: linear-gradient(180deg, #009E8B 0%, #6CFC3F 100%);
    --negative-gradient: linear-gradient(180deg, #FF4D4D 0%, #FF9999 100%);
    --neutral-gradient: linear-gradient(180deg, #FFA500 0%, #FFD700 100%);

    /** Wizard-specific */
    --wizard-passed-slot: var(--interaction-color);
    --wizard-text-color: var(--grey-67);

    /** Typography */
    --abc-favorit: "ABC Favorit";
    --dailysans: "DailySans";
    --body-font: var(--abc-favorit), sans-serif;
    --body-font-size: 14px;
    --body-font-weight: 400;
    --body-line-height: 20px;
    --heading-font: var(--dailysans), sans-serif;
    --heading-font-size: 28px;
    --heading-font-weight: 700;
    --heading-line-height: 36px;
    --subheading-font: var(--dailysans), sans-serif;
    --subheading-font-weight: 700;
    --subheading-line-height: 20px;
    --subheading-font-size: 16px;
    --tiny-heading-font-size: 14px;
    --tiny-heading-font-weight: 700;
    --tiny-heading-line-height: 20px;
    --tiny-heading-font: var(--body-font);
    --tiny-heading-color: var(--grey-38);

    /** Borders */
    --border-radius-none: 0;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-default: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-2xl: 24px;
    --border-radius-circle: 50%;  /* for circular/pill shapes */
    --border-line: 1px solid var(--divider-color);

    /** Sizing and Spacing */
    --spacing-3xs: 4px;
    --spacing-2xs: 8px;    /* was gap-xs */
    --spacing-xs: 10px;    /* from first set */
    --spacing-sm: 12px;    /* was gap-sm */
    --spacing-base: 16px;  /* was gap-md */
    --spacing-md: 20px;    /* was gap-lg and spacing-sm from first set */
    --spacing-lg: 24px;    /* from second set */
    --spacing-xl: 36px;    /* from second set */
    --spacing-2xl: 40px;   /* was spacing-md from first set */
    --spacing-3xl: 50px;
    --spacing-4xl: 64px;   /* was spacing-lg from first set */
    --spacing-5xl: 88px;   /* was gap-super-lg */

    /** Grids */
    --grid-cols: auto;
    --grid-rows: auto;
    --grid-column-gutter: 0;
    --grid-row-gutter: 0;

    /** Buttons */
    --button-width: auto;
    --button-height: auto;
    --button-padding: 8px 16px;
    --button-radius: var(--border-radius-md);
    --button-border: 1px solid transparent;

    --button-font-family: var(--body-font);
    --button-font-size: var(--body-font-size);
    --button-font-weight: 700;
    --button-icon-color: var(--grey-14);
    --button-line-height: 22px;

    --button-surface-color: transparent;
    --button-surface-hover: transparent;
    --button-color: var(--body-color);
    --button-color-hover: var(--button-color);

    --button-primary-surface: var(--grey-14);
    --button-primary-hover: var(--grey-26);
    --button-primary-color: #fff;
    --button-primary-color-hover: #fff;

    --button-secondary-surface: #fff;
    --button-secondary-hover: var(--grey-12);
    --button-secondary-border: 1px solid var(--grey-12);
    --button-secondary-color: var(--grey-12);
    --button-secondary-color-hover: #fff;

    --button-tertiary-surface: #fff;
    --button-tertiary-hover: var(--grey-12);
    --button-tertiary-border: 1px solid var(--grey-91);
    --button-tertiary-color: var(--grey-12);
    --button-tertiary-color-hover: #fff;

    --button-ghost-surface: transparent;
    --button-ghost-hover: var(--grey-86);
    --button-ghost-border: 1px solid transparent;
    --button-ghost-color: var(--grey-12);

    --button-branded-surface: var(--blue-violet);
    --button-branded-hover: #3E2ECC;
    --button-branded-icon-color: #fff;

    --button-disabled-surface: var(--grey-66);

    --button-width-sm: 133px;
    --button-width-md: 157px;
    --button-width-full: 100%;

    /** Inputs */
    --input-default-width: 450px;
    --input-font-size: var(--body-font-size);
    --input-color: var(--grey-38);
    --input-border: 1px solid var(--grey-86);
    --border-input-group: 1px solid var(--grey-91);
    --input-padding: 12px;

    /** Animations */
    --button-transition: background-color .3s ease, color .3s ease;

    /** Light Theme Variables */
    --color-light: #1E1E1E;
    --color-disable-light: #A8A8A8;
    --border-light: #E8E8E8;
    --btn-bg-light: #fff;
    --btn-color-light: #232323;
    --btn-border-light: #DADADA;

    --btn-imp-clr-light: #fff;
    --btn-imp-bg-light: #232323;
    --btn-imp-border-light: transparent;
    --btn-imp-bg-hover-light: #0D0D0D;
    --btn-imp-border-hover-light: transparent;

    --toggle-bg-light: #767676;

    --radio-bg-light: #B5B5B5;
    --radio-select-bg-light: #F1E8FD;
    --radio-select-clr-light: var(--blue-violet);
    --text-secondary-light: #606060;
    --skeleton-color-light: #cccccc;

    /** Theme Variables */
    --background-theme: var(--grey-95);
    --bghigh-theme: var(--white);
    --bghigh-shadow-theme: var(--bghigh-shadow-light);
    --color-theme: var(--color-light);
    --color-disable-theme: var(--color-disable-light);
    --border-theme: var(--border-light);
    --btn-bg-theme: var(--btn-bg-light);
    --btn-color-theme: var(--btn-color-light);
    --btn-border-theme: var(--btn-border-light);

    --btn-imp-clr-theme: var(--btn-imp-clr-light);
    --btn-imp-bg-theme:  var(--btn-imp-bg-light);
    --btn-imp-border-theme:  var(--btn-imp-border-light);
    --btn-imp-bg-hover-theme: var(--btn-imp-bg-hover-light);
    --btn-imp-border-hover-theme:  var(--btn-imp-border-hover-light);

    --toggle-bg-theme: var(--toggle-bg-light);

    --radio-bg-theme: var(--radio-bg-light);
    --radio-select-bg-theme: var(--radio-select-bg-light);
    --radio-select-clr-theme: var(--radio-select-clr-light);
    --text-secondary-theme: var(--text-secondary-light);
    --skeleton-color-theme: var(--skeleton-color-light);

    /** Sidebar */
    --sidebar-background: var(--grey-95);
    --sidebar-padding-block: var(--spacing-lg) 0;
    --sidebar-padding-inline: var(--spacing-xs);

    /** Search form */
    --search-form-padding: 24px 8px 0;

    /** Search result */
    --search-result-padding: 12px 8px 60px;

    /** Alerts/Feedback */
    --feedback-padding: 12px 16px;
    --feedback-radius: 8px 12px 12px 8px;
    --feedback-border-width: 8px;
    --feedback-font-size: 14px;
    --feedback-icon-size: 18px;
    --feedback-close-size: 16px;
    --feedback-width: auto;

    /* Default (Neutral) */
    --feedback-bg: #f8f9fa;
    --feedback-border: #dee2e6;
    --feedback-text: var(--grey-12);
    --feedback-box-shadow: none;

    /* Success */
    --success-bg: #F2FBF0;
    --success-border: #3FB41A;
    --success-text: var(--grey-12);
    --success-box-shadow: 3px 5px 3px 0px #3FB41A40;

    /* Error */
    --error-bg: #FFEAEA;
    --error-border: #EA3030;
    --error-text: var(--grey-12);
    --error-box-shadow: 3px 5px 3px 0px #EA303040;

    /* Warning */
    --warning-bg: #FFF8E5; /* soft yellow */
    --warning-border: #F5B301; /* amber */
    --warning-text: var(--grey-12);
    --warning-box-shadow: 3px 5px 3px 0px #F5B30140;

    /* Info */
    --info-bg: #EAF4FF; /* soft blue */
    --info-border: #1E7AFF; /* blue */
    --info-text: var(--grey-12);
    --info-box-shadow: 3px 5px 3px 0px #1E7AFF40;

    /* Icons assets */
    --success-icon: url('../Assets/CheckmarkCircleFilledGreen.svg');
    --error-icon: url('../Assets/WarningFilled.svg');
    --warning-icon: url('../Assets/WarningFilled.svg');
    --info-icon: url('../Assets/InfoCircle.svg');

    /** Cards */
    --card-padding: var(--spacing-sm);
    --card-border-radius: var(--border-radius-lg);
    --card-border: var(--border-line);
    --card-box-shadow: var(--box-shadow-card);
    --card-background: #fff;

    /** Tabs */
    --tabs-header-border: 1px solid var(--grey-91);
    --tabs-header-gap: 24px;
    --tabs-header-margin-inline: var(--spacing-xs);

    --tabs-button-color: var(--grey-66);
    --tabs-button-padding-block: var(--spacing-3xs) var(--spacing-sm);
    --tabs-button-padding-inline: var(--spacing-3xs);
    --tabs-button-font-size: 16px;
    --tabs-button-font-weight: 700;
    --tabs-button-line-height: 20px;
    --tabs-button-hover-bg: #ddd;
    --tabs-button-hover-color: inherit;
    --tabs-button-border-radius: var(--border-radius-md);

    --tabs-active-color: var(--grey-12);
    --tabs-ornament-color: transparent;
    --tabs-underline-height: 4px;
    --tabs-underline-radius: 4px;

    --tabs-content-height: 64vh;

}