/*-------- Colors --------*/
//primary
$bit-color-primary: var(--bit-clr-pri);
$bit-color-primary-hover: var(--bit-clr-pri-hover);
$bit-color-primary-active: var(--bit-clr-pri-active);
$bit-color-primary-dark: var(--bit-clr-pri-dark);
$bit-color-primary-dark-hover: var(--bit-clr-pri-dark-hover);
$bit-color-primary-dark-active: var(--bit-clr-pri-dark-active);
$bit-color-primary-light: var(--bit-clr-pri-light);
$bit-color-primary-light-hover: var(--bit-clr-pri-light-hover);
$bit-color-primary-light-active: var(--bit-clr-pri-light-active);
$bit-color-primary-text: var(--bit-clr-pri-text);

//secondary
$bit-color-secondary: var(--bit-clr-sec);
$bit-color-secondary-hover: var(--bit-clr-sec-hover);
$bit-color-secondary-active: var(--bit-clr-sec-active);
$bit-color-secondary-dark: var(--bit-clr-sec-dark);
$bit-color-secondary-dark-hover: var(--bit-clr-sec-dark-hover);
$bit-color-secondary-dark-active: var(--bit-clr-sec-dark-active);
$bit-color-secondary-light: var(--bit-clr-sec-light);
$bit-color-secondary-light-hover: var(--bit-clr-sec-light-hover);
$bit-color-secondary-light-active: var(--bit-clr-sec-light-active);
$bit-color-secondary-text: var(--bit-clr-sec-text);

//tertiary
$bit-color-tertiary: var(--bit-clr-ter);
$bit-color-tertiary-hover: var(--bit-clr-ter-hover);
$bit-color-tertiary-active: var(--bit-clr-ter-active);
$bit-color-tertiary-dark: var(--bit-clr-ter-dark);
$bit-color-tertiary-dark-hover: var(--bit-clr-ter-dark-hover);
$bit-color-tertiary-dark-active: var(--bit-clr-ter-dark-active);
$bit-color-tertiary-light: var(--bit-clr-ter-light);
$bit-color-tertiary-light-hover: var(--bit-clr-ter-light-hover);
$bit-color-tertiary-light-active: var(--bit-clr-ter-light-active);
$bit-color-tertiary-text: var(--bit-clr-ter-text);

//info
$bit-color-info: var(--bit-clr-inf);
$bit-color-info-hover: var(--bit-clr-inf-hover);
$bit-color-info-active: var(--bit-clr-inf-active);
$bit-color-info-dark: var(--bit-clr-inf-dark);
$bit-color-info-dark-hover: var(--bit-clr-inf-dark-hover);
$bit-color-info-dark-active: var(--bit-clr-inf-dark-active);
$bit-color-info-light: var(--bit-clr-inf-light);
$bit-color-info-light-hover: var(--bit-clr-inf-light-hover);
$bit-color-info-light-active: var(--bit-clr-inf-light-active);
$bit-color-info-text: var(--bit-clr-inf-text);

//success
$bit-color-success: var(--bit-clr-suc);
$bit-color-success-hover: var(--bit-clr-suc-hover);
$bit-color-success-active: var(--bit-clr-suc-active);
$bit-color-success-dark: var(--bit-clr-suc-dark);
$bit-color-success-dark-hover: var(--bit-clr-suc-dark-hover);
$bit-color-success-dark-active: var(--bit-clr-suc-dark-active);
$bit-color-success-light: var(--bit-clr-suc-light);
$bit-color-success-light-hover: var(--bit-clr-suc-light-hover);
$bit-color-success-light-active: var(--bit-clr-suc-light-active);
$bit-color-success-text: var(--bit-clr-suc-text);

//warning
$bit-color-warning: var(--bit-clr-wrn);
$bit-color-warning-hover: var(--bit-clr-wrn-hover);
$bit-color-warning-active: var(--bit-clr-wrn-active);
$bit-color-warning-dark: var(--bit-clr-wrn-dark);
$bit-color-warning-dark-hover: var(--bit-clr-wrn-dark-hover);
$bit-color-warning-dark-active: var(--bit-clr-wrn-dark-active);
$bit-color-warning-light: var(--bit-clr-wrn-light);
$bit-color-warning-light-hover: var(--bit-clr-wrn-light-hover);
$bit-color-warning-light-active: var(--bit-clr-wrn-light-active);
$bit-color-warning-text: var(--bit-clr-wrn-text);

//severe-warning
$bit-color-severe-warning: var(--bit-clr-swr);
$bit-color-severe-warning-hover: var(--bit-clr-swr-hover);
$bit-color-severe-warning-active: var(--bit-clr-swr-active);
$bit-color-severe-warning-dark: var(--bit-clr-swr-dark);
$bit-color-severe-warning-dark-hover: var(--bit-clr-swr-dark-hover);
$bit-color-severe-warning-dark-active: var(--bit-clr-swr-dark-active);
$bit-color-severe-warning-light: var(--bit-clr-swr-light);
$bit-color-severe-warning-light-hover: var(--bit-clr-swr-light-hover);
$bit-color-severe-warning-light-active: var(--bit-clr-swr-light-active);
$bit-color-severe-warning-text: var(--bit-clr-swr-text);

//error
$bit-color-error: var(--bit-clr-err);
$bit-color-error-hover: var(--bit-clr-err-hover);
$bit-color-error-active: var(--bit-clr-err-active);
$bit-color-error-dark: var(--bit-clr-err-dark);
$bit-color-error-dark-hover: var(--bit-clr-err-dark-hover);
$bit-color-error-dark-active: var(--bit-clr-err-dark-active);
$bit-color-error-light: var(--bit-clr-err-light);
$bit-color-error-light-hover: var(--bit-clr-err-light-hover);
$bit-color-error-light-active: var(--bit-clr-err-light-active);
$bit-color-error-text: var(--bit-clr-err-text);

//foreground
$bit-color-foreground-primary: var(--bit-clr-fg-pri);
$bit-color-foreground-primary-hover: var(--bit-clr-fg-pri-hover);
$bit-color-foreground-primary-active: var(--bit-clr-fg-pri-active);
$bit-color-foreground-secondary: var(--bit-clr-fg-sec);
$bit-color-foreground-secondary-hover: var(--bit-clr-fg-sec-hover);
$bit-color-foreground-secondary-active: var(--bit-clr-fg-sec-hover);
$bit-color-foreground-tertiary: var(--bit-clr-fg-ter);
$bit-color-foreground-tertiary-hover: var(--bit-clr-fg-ter-hover);
$bit-color-foreground-tertiary-active: var(--bit-clr-fg-ter-active);
$bit-color-foreground-disabled: var(--bit-clr-fg-dis);

//backgrounds
$bit-color-background-primary: var(--bit-clr-bg-pri);
$bit-color-background-primary-hover: var(--bit-clr-bg-pri-hover);
$bit-color-background-primary-active: var(--bit-clr-bg-pri-active);
$bit-color-background-secondary: var(--bit-clr-bg-sec);
$bit-color-background-secondary-hover: var(--bit-clr-bg-sec-hover);
$bit-color-background-secondary-active: var(--bit-clr-bg-sec-active);
$bit-color-background-tertiary: var(--bit-clr-bg-ter);
$bit-color-background-tertiary-hover: var(--bit-clr-bg-ter-hover);
$bit-color-background-tertiary-active: var(--bit-clr-bg-ter-active);
$bit-color-background-disabled: var(--bit-clr-bg-dis);
$bit-color-background-overlay: var(--bit-clr-bg-overlay);

//borders
$bit-color-border-primary: var(--bit-clr-brd-pri);
$bit-color-border-primary-hover: var(--bit-clr-brd-pri-hover);
$bit-color-border-primary-active: var(--bit-clr-brd-pri-active);
$bit-color-border-secondary: var(--bit-clr-brd-sec);
$bit-color-border-secondary-hover: var(--bit-clr-brd-sec-hover);
$bit-color-border-secondary-active: var(--bit-clr-brd-sec-active);
$bit-color-border-tertiary: var(--bit-clr-brd-ter);
$bit-color-border-tertiary-hover: var(--bit-clr-brd-ter-hover);
$bit-color-border-tertiary-active: var(--bit-clr-brd-ter-active);
$bit-color-border-disabled: var(--bit-clr-brd-dis);

//required
$bit-color-requried: var(--bit-clr-req);

//neutrals
$bit-color-neutrals-white: var(--bit-clr-ntr-white);
$bit-color-neutrals-black: var(--bit-clr-ntr-black);
$bit-color-neutrals-gray10: var(--bit-clr-ntr-gray10);
$bit-color-neutrals-gray20: var(--bit-clr-ntr-gray20);
$bit-color-neutrals-gray30: var(--bit-clr-ntr-gray30);
$bit-color-neutrals-gray40: var(--bit-clr-ntr-gray40);
$bit-color-neutrals-gray50: var(--bit-clr-ntr-gray50);
$bit-color-neutrals-gray60: var(--bit-clr-ntr-gray60);
$bit-color-neutrals-gray70: var(--bit-clr-ntr-gray70);
$bit-color-neutrals-gray80: var(--bit-clr-ntr-gray80);
$bit-color-neutrals-gray90: var(--bit-clr-ntr-gray90);
$bit-color-neutrals-gray100: var(--bit-clr-ntr-gray100);
$bit-color-neutrals-gray110: var(--bit-clr-ntr-gray110);
$bit-color-neutrals-gray120: var(--bit-clr-ntr-gray120);
$bit-color-neutrals-gray130: var(--bit-clr-ntr-gray130);
$bit-color-neutrals-gray140: var(--bit-clr-ntr-gray140);
$bit-color-neutrals-gray150: var(--bit-clr-ntr-gray150);
$bit-color-neutrals-gray160: var(--bit-clr-ntr-gray160);
$bit-color-neutrals-gray170: var(--bit-clr-ntr-gray170);
$bit-color-neutrals-gray180: var(--bit-clr-ntr-gray180);
$bit-color-neutrals-gray190: var(--bit-clr-ntr-gray190);
$bit-color-neutrals-gray200: var(--bit-clr-ntr-gray200);
$bit-color-neutrals-gray210: var(--bit-clr-ntr-gray210);
$bit-color-neutrals-gray220: var(--bit-clr-ntr-gray220);

//shadows-callout
$bit-box-shadow-callout: var(--bit-shd-cal);
$bit-box-shadow-callout2: var(--bit-shd-cal2);

//shadows
$bit-box-shadow-1: var(--bit-shd-1);
$bit-box-shadow-2: var(--bit-shd-2);
$bit-box-shadow-3: var(--bit-shd-3);
$bit-box-shadow-4: var(--bit-shd-4);
$bit-box-shadow-5: var(--bit-shd-5);
$bit-box-shadow-6: var(--bit-shd-6);
$bit-box-shadow-7: var(--bit-shd-7);
$bit-box-shadow-8: var(--bit-shd-8);
$bit-box-shadow-9: var(--bit-shd-9);
$bit-box-shadow-10: var(--bit-shd-10);
$bit-box-shadow-11: var(--bit-shd-11);
$bit-box-shadow-12: var(--bit-shd-12);
$bit-box-shadow-13: var(--bit-shd-13);
$bit-box-shadow-14: var(--bit-shd-14);
$bit-box-shadow-15: var(--bit-shd-15);
$bit-box-shadow-16: var(--bit-shd-16);
$bit-box-shadow-17: var(--bit-shd-17);
$bit-box-shadow-18: var(--bit-shd-18);
$bit-box-shadow-19: var(--bit-shd-19);
$bit-box-shadow-20: var(--bit-shd-20);
$bit-box-shadow-21: var(--bit-shd-21);
$bit-box-shadow-22: var(--bit-shd-22);
$bit-box-shadow-23: var(--bit-shd-23);
$bit-box-shadow-24: var(--bit-shd-24);

//spacing
$bit-spacing-scaling-factor: var(--bit-spa-scaling-factor);

//z-index
$bit-zindex-snackbar: var(--bit-zin-snackbar);
$bit-zindex-modal: var(--bit-zin-modal);
$bit-zindex-callout: var(--bit-zin-callout);
$bit-zindex-overlay: var(--bit-zin-overlay);
$bit-zindex-base: var(--bit-zin-base);

//shape
$bit-shape-border-radius: var(--bit-shp-brd-radius);
$bit-shape-border-width: var(--bit-shp-brd-width);
$bit-shape-border-style: var(--bit-shp-brd-style);

/*---- Typography ----*/
$bit-typography-font-family: var(--bit-tpg-font-family);
$bit-typography-font-weight: var(--bit-tpg-font-weight);
$bit-typography-line-height: var(--bit-tpg-line-height);
$bit-typography-gutter-size: var(--bit-tpg-gutter-size);

// h1
$bit-typography-h1-margin: var(--bit-tpg-h1-margin);
$bit-typography-h1-font-weight: var(--bit-tpg-h1-font-weight);
$bit-typography-h1-font-size: var(--bit-tpg-h1-font-size);
$bit-typography-h1-line-height: var(--bit-tpg-h1-line-height);
$bit-typography-h1-letter-spacing: var(--bit-tpg-h1-letter-spacing);

// h2
$bit-typography-h2-margin: var(--bit-tpg-h2-margin);
$bit-typography-h2-font-weight: var(--bit-tpg-h2-font-weight);
$bit-typography-h2-font-size: var(--bit-tpg-h2-font-size);
$bit-typography-h2-line-height: var(--bit-tpg-h2-line-height);
$bit-typography-h2-letter-spacing: var(--bit-tpg-h2-letter-spacing);

// h3
$bit-typography-h3-margin: var(--bit-tpg-h3-margin);
$bit-typography-h3-font-weight: var(--bit-tpg-h3-font-weight);
$bit-typography-h3-font-size: var(--bit-tpg-h3-font-size);
$bit-typography-h3-line-height: var(--bit-tpg-h3-line-height);
$bit-typography-h3-letter-spacing: var(--bit-tpg-h3-letter-spacing);

// h4
$bit-typography-h4-margin: var(--bit-tpg-h4-margin);
$bit-typography-h4-font-weight: var(--bit-tpg-h4-font-weight);
$bit-typography-h4-font-size: var(--bit-tpg-h4-font-size);
$bit-typography-h4-line-height: var(--bit-tpg-h4-line-height);
$bit-typography-h4-letter-spacing: var(--bit-tpg-h4-letter-spacing);

// h5
$bit-typography-h5-margin: var(--bit-tpg-h5-margin);
$bit-typography-h5-font-weight: var(--bit-tpg-h5-font-weight);
$bit-typography-h5-font-size: var(--bit-tpg-h5-font-size);
$bit-typography-h5-line-height: var(--bit-tpg-h5-line-height);
$bit-typography-h5-letter-spacing: var(--bit-tpg-h5-letter-spacing);

// h6
$bit-typography-h6-margin: var(--bit-tpg-h6-margin);
$bit-typography-h6-font-weight: var(--bit-tpg-h6-font-weight);
$bit-typography-h6-font-size: var(--bit-tpg-h6-font-size);
$bit-typography-h6-line-height: var(--bit-tpg-h6-line-height);
$bit-typography-h6-letter-spacing: var(--bit-tpg-h6-letter-spacing);

// subtitle1
$bit-typography-subtitle1-margin: var(--bit-tpg-subtitle1-margin);
$bit-typography-subtitle1-font-weight: var(--bit-tpg-subtitle1-font-weight);
$bit-typography-subtitle1-font-size: var(--bit-tpg-subtitle1-font-size);
$bit-typography-subtitle1-line-height: var(--bit-tpg-subtitle1-line-height);
$bit-typography-subtitle1-letter-spacing: var(--bit-tpg-subtitle1-letter-spacing);

// subtitle2
$bit-typography-subtitle2-margin: var(--bit-tpg-subtitle2-margin);
$bit-typography-subtitle2-font-weight: var(--bit-tpg-subtitle2-font-weight);
$bit-typography-subtitle2-font-size: var(--bit-tpg-subtitle2-font-size);
$bit-typography-subtitle2-line-height: var(--bit-tpg-subtitle2-line-height);
$bit-typography-subtitle2-letter-spacing: var(--bit-tpg-subtitle2-letter-spacing);

// body1
$bit-typography-body1-margin: var(--bit-tpg-body1-margin);
$bit-typography-body1-font-weight: var(--bit-tpg-body1-font-weight);
$bit-typography-body1-font-size: var(--bit-tpg-body1-font-size);
$bit-typography-body1-line-height: var(--bit-tpg-body1-line-height);
$bit-typography-body1-letter-spacing: var(--bit-tpg-body1-letter-spacing);

// body2
$bit-typography-body2-margin: var(--bit-tpg-body2-margin);
$bit-typography-body2-font-weight: var(--bit-tpg-body2-font-weight);
$bit-typography-body2-font-size: var(--bit-tpg-body2-font-size);
$bit-typography-body2-line-height: var(--bit-tpg-body2-line-height);
$bit-typography-body2-letter-spacing: var(--bit-tpg-body2-letter-spacing);

// button
$bit-typography-button-margin: var(--bit-tpg-button-margin);
$bit-typography-button-font-weight: var(--bit-tpg-button-font-weight);
$bit-typography-button-font-size: var(--bit-tpg-button-font-size);
$bit-typography-button-line-height: var(--bit-tpg-button-line-height);
$bit-typography-button-letter-spacing: var(--bit-tpg-button-letter-spacing);
$bit-typography-button-text-transform: var(--bit-tpg-button-text-transform);
$bit-typography-button-display: var(--bit-tpg-button-display);

// caption1
$bit-typography-caption1-margin: var(--bit-tpg-caption1-margin);
$bit-typography-caption1-font-weight: var(--bit-tpg-caption1-font-weight);
$bit-typography-caption1-font-size: var(--bit-tpg-caption1-font-size);
$bit-typography-caption1-line-height: var(--bit-tpg-caption1-line-height);
$bit-typography-caption1-letter-spacing: var(--bit-tpg-caption1-letter-spacing);

// caption2
$bit-typography-caption2-margin: var(--bit-tpg-caption2-margin);
$bit-typography-caption2-font-weight: var(--bit-tpg-caption2-font-weight);
$bit-typography-caption2-font-size: var(--bit-tpg-caption2-font-size);
$bit-typography-caption2-line-height: var(--bit-tpg-caption2-line-height);
$bit-typography-caption2-letter-spacing: var(--bit-tpg-caption2-letter-spacing);

// overline
$bit-typography-overline-margin: var(--bit-tpg-overline-margin);
$bit-typography-overline-font-weight: var(--bit-tpg-overline-font-weight);
$bit-typography-overline-font-size: var(--bit-tpg-overline-font-size);
$bit-typography-overline-line-height: var(--bit-tpg-overline-line-height);
$bit-typography-overline-letter-spacing: var(--bit-tpg-overline-letter-spacing);
$bit-typography-overline-text-transform: var(--bit-tpg-overline-text-transform);
$bit-typography-overline-display: var(--bit-tpg-overline-display);

// inherit
$bit-typography-inherit-margin: var(--bit-tpg-inherit-margin);
$bit-typography-inherit-font-family: var(--bit-tpg-inherit-font-family);
$bit-typography-inherit-font-weight: var(--bit-tpg-inherit-font-weight);
$bit-typography-inherit-font-size: var(--bit-tpg-inherit-font-size);
$bit-typography-inherit-line-height: var(--bit-tpg-inherit-line-height);
$bit-typography-inherit-letter-spacing: var(--bit-tpg-inherit-letter-spacing);
