// Variables
$font-stack-en: var(--font-stack-en);
$font-stack-hi: var(--font-stack-hi);
$font-stack-ur: var(--font-stack-ur);

// Base Colors
$blue: var(--primary-color);
$green: var(--secondary-color);
$orange: var(--tertiary-color);
$red: var(--red);
$black: var(--black);
$white: var(--white);
$indigo: var(--indigo);
$purple: var(--purple);
$pink: var(--pink);
$yellow: var(--yellow);
$teal: var(--teal);
$cyan: var(--cyan);
$gray: var(--gray);

// brand Colors
$primary-color: var(--primary-color);
$secondary-color: var(--secondary-color);
$tertiary-color: var(--tertiary-color);
// Neutral Colors
$white-color: var(--white);
// gray colors shades
$gray-0: var(--gray-0); // place holder active bg #F2F2F2
$gray-100: var(--gray-100); // disable btn bg, icon color #CCCCCC
$gray-200: var(--gray-200); // disable text, place holder text #999999
$gray-300: var(--gray-300); // sub heading 2 #969696
$gray-400: var(--gray-400); // sub heading #666666
$gray-800: var(--gray-800); // text color #333333

// primary colors shades
$primary-0: var(--primary-0); // bg
$primary-100: var(--primary-100); // default button bg
$primary-200: var(--primary-200); // divider
$primary-250: var(--primary-250); //pagination bg color
$primary-300: var(--primary-300); // outline, focus fields
$primary-400: var(--primary-400); // button bg, heading, table titles, links, toggles
$primary-600: var(--primary-600); // on press
$primary-800: var(--primary-800); // hover

// secondary colors shades
$secondary-0: var(--secondary-0); // toast bg, label
$secondary-100: var(--secondary-100); // buttong bg, toast
$secondary-200: var(--secondary-200); // button bg
$secondary-400: var(--secondary-400); // hover

// tertiary colors shades
$tertiary-0: var(--tertiary-0); // toast bg, label
$tertiary-100: var(--tertiary-100); // buttong bg, toast
$tertiary-400: var(--tertiary-400); // icon, label, notification bg

// red colors shades
$red-0: var(--red-0); // toast bg
$red-100: var(--red-100); // buttong bg, toast
$red-400: var(--red-400); // icon color, lable, notification

// input border width
$input-border-width: 0.0625rem;

// Status Colors
$info-color: var(--primary-400);
$success-color: var(--secondary-200);
$warning-color: var(--tertiary-400);
$danger-color: var(--red-100);
$body-background-color: var(--primary-0);
$default-text-color: var(--gray-800);
$bg-body: var(--primary-0);
$body-color: var(--gray-800);

/* Fonts */
$font-default-size: var(--font-default-size);
$font-size-base: var(--font-size-base); // 14px Assumes the browser default, typically `16px`
$font-weight-light: var(--font-weight-light);
$font-weight-normal: var(--font-weight-normal);
$font-weight-bold: var(--font-weight-bold);
$font-weight-base: var(--font-weight-normal);
$line-height-base: calc(var(--font-size-base) * var(--line-height-value));
$h1-font-size: var(--h1-font-size); // 32px
$h2-font-size: var(--h2-font-size); // 28px
$h3-font-size: var(--h3-font-size); // 24px
$h4-font-size: var(--h4-font-size); // 20px
$h5-font-size: var(--h5-font-size); // 16px
$h6-font-size: var(--font-size-base); // 14px
$font-size-lg: var(--h4-font-size); //20px
$font-size-md: var(--h5-font-size); // 16px
$font-size-normal: var(--font-size-base); // 14px
$font-size-sm: var(--font-size-sm); // 12px
$font-size-xs: var(--font-size-xs); // 10px
$p-font-size: var(--font-size-base); //14px

// spaces
$base-block-space: 0.5rem;