:root {
    /* ------------------------- GLOBAL TO ANY ------------------------ */
    /* NEUTRAL COLORS */
    --white: #fff;
    --gray100: #F0F3F5;
    --gray200: #E2E2E5;
    --gray300: #C7CACF;
    --gray400: #9FA7AF;
    --gray500: #5C606A;
    --gray600: #30343A;
    --almost-black: #333;

    /* SPECIFIC UI */
    --overlay: #1e1e1ee6;
    --palette-gradient: linear-gradient(134deg, var(--primary-bg) 0.16%, var(--secondary-bg) 38.18%, var(--primary-color-darker) 107.42%);
    --palette-gradient-mobile: linear-gradient(100deg, var(--primary-bg) -26.84%, var(--secondary-bg) 43.18%, var(--primary-color-darker) 91.42%);

    /* SEMANTIC COLORS */
    --success-color: #6ABF4B;
    --success-bg: #DBF9D0;
    --info-color: #29A0F5;
    --info-bg: #DBF0FF;
    --alert-color: #FFB71B;
    --alert-bg: #FFF2D0;
    --error-color: #ED3833;
    --error-bg: #FFE2E1;
    --error-bg2: #F76980;
    --no-color: transparent;

    /* ----------------- COLOR ASSIGNATIONS ----------------- */
    --button-bg-primary: var(--primary-color);
    --button-bg-secondary: var(--primary-color-lighter);
    --button-bg-secondary-hover: var(--primary-color-light);
    --button-bg-card-hover: var(--white);
    --button-text-primary: var(--white);
    --button-text-secondary: var(--primary-color-dark);
    --button-text-tertiary: var(--primary-color-light);

    --button-bg-disabled: var(--gray300);
    --button-bg-disabled2: var(--gray500);
    --button-bg-disabled3: var(--gray100);
    --button-text-disabled: var(--gray400);
    --button-text-disabled2: var(--gray300);

    --page-title-text: var(--gray500);
    --page-title-border: var(--gray300);
    --section-border: var(--gray200);
    --section-box-field: var(--gray100);
    --input-field-active-border: var(--primary-color);
    --primary-text: var(--primary-color);
    --secondary-text: var(--primary-color-dark);
    --base-text: var(--white);
    --primary-bg: var(--primary-color);
    --secondary-bg: var(--primary-color-dark);
    --tertiary-bg: var(--gray100);
    --base-bg: var(--white);
    --darker-bg: var(--almost-black);

    --body-text: var(--almost-black);
    --body-text-secondary: var(--gray400);
    --body-text-emphasized: var(--gray600);
    --body-text-secondary-emphasized: var(--gray500);

    /* ----------------- FONT SIZES ------------------ */
    --small-font-size: 10px;
    --base-font-size: 12px;
    --md-font-size: 14px;
    --lg-font-size: 16px;

    /* ----------------- FONT WEIGHTS ------------------ */
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;

    /* ----------------- LINE HEIGHTS ------------------ */
    --small-line-height: 16px;
    --base-line-height: 20px;
    --md-line-height: 22px;
    --lg-line-height: 24px;
    --xl-line-height: 37px;
    --input-line-height: 40px;
}