// Columns (Grid)
$columns: 12;

// Font sizing
$fsize: (
  base: 16px, // base
  xs: 12px, // caption
  sm: 14px, // button
  md: 18px, // h6
  lg: 20px, // h5
  xl: 24px, // h4
  2xl: 28px, // h3
  3xl: 32px, // h2
  4xl: 36px, // h1
) !default;

// Font weights
$fwght: (
  light: 300,
  normal: 400,
  semibold: 500,
  bold: 700,
  bolded: 900
) !default;


// Width & height size
$whsize: (
  0: 0,
  4: 4px,
  8: 8px,
  12: 12px,
  16: 16px,
  18: 18px,
  20: 20px,
  24: 24px,
  28: 28px,
  32: 32px,
  42: 42px,
  48: 48px,
  5p: 5%,
  10p: 10%,
  15p: 15%,
  20p: 20%,
  25p: 25%,
  30p: 30%,
  35p: 35%,
  40p: 40%,
  45p: 45%,
  50p: 50%,
  55p: 55%,
  60p: 60%,
  65p: 65%,
  70p: 70%,
  75p: 75%,
  80p: 80%,
  85p: 85%,
  90p: 90%,
  95p: 95%,
  100p: 100%,
  full: 100%,
  ) !default;

// Spacing (Margin, padding, gap)
$spacing: (
  4: 4px,
  8: 8px,
  12: 12px,
  16: 16px,
  20: 20px,
  24: 24px,
  28: 28px,
  32: 32px,
  36: 36px,
  42: 42px,
  48: 48px) !default;

// Border radius
$bradius: (
  0: 0,
  4: 4px,
  8: 8px,
  12: 12px,
  16: 16px,
  20: 20px,
  24: 24px,
  28: 28px,
  32: 32px,
  full: 99999px) !default;

// X, Y position (left, top, right, bottom)
$pxy: (
  0: 0,
  4: 4px,
  8: 8px,
  12: 12px,
  16: 16px,
  20: 20px,
  24: 24px,
  28: 28px,
  32: 32px,
  36: 36px,
  42: 42px,
  48: 48px,
  100: 100%) !default;
  
// Breakpoints
$breakpoint: (
  "xs": 480px,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px) !default;

$xs: map-get($breakpoint, "xs"
);
$sm: map-get($breakpoint, "sm");
$md: map-get($breakpoint, "md");
$lg: map-get($breakpoint, "lg");
$xl: map-get($breakpoint, "xl");