$font-family-base: "Nunito", sans-serif;
$font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;

$font-sizes: (
  xs: 0.75rem,
  sm: 0.875rem,
  base: 1.1rem,
  lg: 1.35rem,
  xl: 1.8rem,
  xxl: 2.2rem
);

$font-weights: (
  light: 300,
  normal: 400,
  medium: 500,
  semibold: 600,
  bold: 700
);

$line-heights: (
  tight: 1,
  normal: 1.3,
  heading: 1.5
);

$colors: (
  primary: #aa0b3d,
  primary-alt: #aa0b3da8,
  alt: #b5451896,
  secondary: #333333,
  success: #34b97b,
  warning: #ffc107,
  danger: #dc3545,
  info: #0dcaf0,
  light: #e5e5e5,
  dark: #212529,
  white: #ffffff,
  black: #000000,
  muted: #c7c7c7,
  gray: #6c757d,
  accent-white: #f7f7f7,
  accent: #08bbbb,
  transparent: transparent
);

$space: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);

$radii: (
  none: 0,
  sm: 0.125rem,
  md: 0.25rem,
  lg: 0.5rem,
  xl: 1rem,
  full: 9999px
);

$border-widths: (
  0: 0,
  1: 1px,
  2: 2px,
  3: 3px
);

$shadows: (
  1: 0 1px 3px rgba(0, 0, 0, 0.12),
  2: 0 2px 6px rgba(0, 0, 0, 0.16),
  3: 0 4px 10px rgba(0, 0, 0, 0.18),
  4: 0 6px 15px rgba(0, 0, 0, 0.20),
  5: 0 10px 24px rgba(0, 0, 0, 0.22)
);

$drop-shadows: (
  1: 0 2px 4px rgba(0, 0, 0, 0.14),
  2: 0 4px 8px rgba(0, 0, 0, 0.18),
  3: 0 8px 16px rgba(0, 0, 0, 0.20),
  4: 0 12px 24px rgba(0, 0, 0, 0.22),
  5: 0 20px 40px rgba(0, 0, 0, 0.24)
);

$timings: (
  fast: 0.15s,
  base: 0.25s,
  slow: 0.4s
);

$easings: (
  in-out: cubic-bezier(.4, 0, .2, 1),
  out: cubic-bezier(0, 0, .2, 1),
  in: cubic-bezier(.4, 0, 1, 1)
);

$grid-columns: 12;
$container-padding: 1rem;

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 1600px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  xxxl: 1520px
);

/* ========================================================================== */
/* Flexbox Maps                                                               */
/* ========================================================================== */
$flex-directions: (
  row: row,
  row-reverse: row-reverse,
  column: column,
  column-reverse: column-reverse
);

$justify-content-values: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  evenly: space-evenly
);

$align-items-values: (
  start: flex-start,
  end: flex-end,
  center: center,
  baseline: baseline,
  stretch: stretch
);

$align-content-values: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  stretch: stretch
);


$gutters: (
  0: map-get($space, 0),
  1: map-get($space, 1),
  2: map-get($space, 2),
  3: map-get($space, 3),
  4: map-get($space, 4),
  5: map-get($space, 5)
);

$display-types: block, flex, inline, inline-block, inline-flex, grid, none;

$z: (
  base: 1,
  dropdown: 1000,
  overlay: 1100,
  modal: 1200,
  toast: 1300
);

$control-colors: (
  bg: #fdfdfd,
  fg: map-get($colors, secondary),
  border: map-get($colors, muted),
  border-hover: map-get($colors, secondary),
  focus: map-get($colors, primary),
  ring: rgba(map-get($colors, primary), 0.2),
  placeholder: map-get($colors, gray),
  disabled-bg: map-get($colors, light)
);

$control-sizes: (
  sm: (
    font-size: map-get($font-sizes, sm),
    line-height: map-get($line-heights, normal),
    px: 0.5rem,
    py: 0.25rem,
    radius: map-get($radii, md)
  ),
  md: (
    font-size: map-get($font-sizes, base),
    line-height: map-get($line-heights, normal),
    px: 0.75rem,
    py: 0.375rem,
    radius: map-get($radii, md)
  ),
  lg: (
    font-size: map-get($font-sizes, lg),
    line-height: map-get($line-heights, normal),
    px: 1rem,
    py: 0.5rem,
    radius: map-get($radii, lg)
  ),
  xl: (
    font-size: map-get($font-sizes, xl),
    line-height: map-get($line-heights, heading),
    px: 1.25rem,
    py: 0.75rem,
    radius: map-get($radii, lg)
  )
);

$control-border: (
  width: map-get($border-widths, 1),
  style: solid
);

$size-px: (
  0: 0px,
  1: 1px,
  2: 2px,
  4: 4px,
  8: 8px,
  12: 12px,
  16: 16px,
  20: 20px,
  24: 24px,
  32: 32px,
  40: 40px,
  48: 48px,
  56: 56px,
  64: 64px,
  80: 80px,
  96: 96px,
  112: 112px,
  128: 128px,
  160: 160px,
  192: 192px,
  224: 224px,
  256: 256px,
  320: 320px,
  384: 384px,
  448: 448px,
  512: 512px
);

$size-percent: (
  0: 0%,
  25: 25%,
  33: 33.3333%,
  50: 50%,
  66: 66.6667%,
  75: 75%,
  100: 100%
);

$size-rem: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 2rem,
  6: 3rem,
  7: 4rem,
  8: 6rem
);

$size-vw: (
  10: 10vw,
  20: 20vw,
  25: 25vw,
  33: 33vw,
  40: 40vw,
  50: 50vw,
  60: 60vw,
  66: 66vw,
  75: 75vw,
  80: 80vw,
  90: 90vw,
  100: 100vw
);

$size-vh: (
  10: 10vh,
  20: 20vh,
  25: 25vh,
  33: 33vh,
  40: 40vh,
  50: 50vh,
  60: 60vh,
  66: 66vh,
  75: 75vh,
  80: 80vh,
  90: 90vh,
  100: 100vh
);

$size-dvh: (
  10: 10dvh,
  20: 20dvh,
  25: 25dvh,
  33: 33dvh,
  40: 40dvh,
  50: 50dvh,
  60: 60dvh,
  66: 66dvh,
  75: 75dvh,
  80: 80dvh,
  90: 90dvh,
  100: 100dvh
);

$size-svh: (
  10: 10svh,
  20: 20svh,
  25: 25svh,
  33: 33svh,
  40: 40svh,
  50: 50svh,
  60: 60svh,
  66: 66svh,
  75: 75svh,
  80: 80svh,
  90: 90svh,
  100: 100svh
);

$size-lvh: (
  10: 10lvh,
  20: 20lvh,
  25: 25lvh,
  33: 33lvh,
  40: 40lvh,
  50: 50lvh,
  60: 60lvh,
  66: 66lvh,
  75: 75lvh,
  80: 80lvh,
  90: 90lvh,
  100: 100lvh
);