/home/smartbloks/.trash/bbp-core/assets/scss/abstracts/_root.scss
:root {
// Responsive Container Width
--container-width: 100%;
--container-sm: 33.75rem;
--container-md: 45rem;
--container-lg: 60rem;
--container-xl: 71.25rem;
--container-xxl: 90rem;
--container-fluid: 100%;
// Gutters
--gutter-x: 1.875rem;
--gutter-3: 0.125rem;
--gutter-5: 0.225rem;
--gutter-10: 0.625rem;
--gutter-15: 0.9375rem;
--gutter-20: 1.25rem;
--gutter-25: 1.5625rem;
--gutter-30: 1.875rem;
--gutter-32: 2rem;
--gutter-35: 2.1875rem;
--gutter-40: 2.5rem;
--gutter-45: 2.8125rem;
--gutter-50: 3.125rem;
//Font Family
--ff-roboto: "Roboto", sans-serif;
;
// Font Weight
--fw-100: 100;
--fw-200: 200;
--fw-300: 300;
--fw-400: 400;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;
--fw-800: 800;
--fw-900: 900;
// Font Size
--fs-12: 0.75rem;
--fs-13: 0.8125rem;
--fs-14: 0.875rem;
--fs-15: 0.9375rem;
--fs-16: 1rem;
--fs-17: 1.0625rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-21: 1.3125rem;
--fs-24: 1.5rem;
--fs-25: 1.5625rem;
--fs-28: 1.75rem;
--fs-30: 1.875rem;
--fs-32: 2rem;
--fs-35: 2.1875rem;
--fs-40: 2.5rem;
--fs-45: 2.8125rem;
// hr
--hr-bg: var(--clr-black);
--hr-width: 100%;
--hr-height: 0.3125rem;
--hr-gutter-y: 1.875rem;
--hr-gutter-x: 0;
--hr-padding: 0;
--hr-radius: 0;
// Margin
--m: 0;
--mt: 0;
--mr: 0;
--mb: 0;
--ml: 0;
--mx: 0;
--my: 0;
--m-auto: auto;
--my-auto: auto;
--mx-auto: auto;
// Padding
--p: 0;
--pt: 0;
--pr: 0;
--pb: 0;
--pl: 0;
--px: 0;
--py: 0;
--p-auto: auto;
--py-auto: auto;
--px-auto: auto;
// Border
--border-width: 0.0625rem;
--border-style: solid;
--border-clr: transparent;
--border: var(--border-width) var(--border-style) var(--border-clr);
--border-t: var(--border-width) var(--border-style) var(--border-clr);
--border-r: var(--border-width) var(--border-style) var(--border-clr);
--border-b: var(--border-width) var(--border-style) var(--border-clr);
--border-l: var(--border-width) var(--border-style) var(--border-clr);
--border-x: var(--border-width) var(--border-style) var(--border-clr);
--border-y: var(--border-width) var(--border-style) var(--border-clr);
// Border Radius
--radius: 0;
--radius-t: 0;
--radius-r: 0;
--radius-b: 0;
--radius-l: 0;
--radius-full: 50%;
// Button Component
--btn-bg: transparent;
--btn-clr: inherit;
--btn-ff: var(--ff-roboto);
--btn-fs: var(--fs-15);
--btn-py: 0.625rem;
--btn-px: 1.125rem;
--btn-my: var(--my);
--btn-mx: var(--mx);
// Color
--clr-black: #000;
--clr-black-100: #0D0E2B;
--clr-dark: #252733;
--clr-text: #575766;
--clr-text-light: #9199A1;
--clr-white: #fff;
--clr-blue: #4C4CF1;
--clr-orange: #ff5a46;
--clr-yellow: #FFE132;
--black_50: #ebebeb;
--black_100: #d6d9dc;
--black_150: #c8ccd0;
--black_200: #bbc0c4;
--black_300: #9fa6ad;
--black_350: #9199a1;
--black_400: #848d95;
--black_500: #6a737c;
--black_600: #535a60;
--black_700: #3c4146;
--black_750: #2f3337;
--black_800: #242729;
--black_900: #0c0d0e;
}