$font-family-base: 'Inter Var', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto ColorEmoji;
$font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

$font-families: (
  base: $font-family-base,
  monospace: $font-family-monospace
);

$font-size-base: 1rem;
$line-height-base: 1.75;
$line-height-sm: px2rem(20px);

$color-dark: #1d2434;
$color-text: #3b454e;
$color-headers: #232b42;
$color-white: #ffffff;
$color-gray-dark: #eaecee;
$color-gray: #f7f9fb;
$color-gray-light: #fafbfc;

$color-primary: #0054a6;

$color-red: #e03131;
$color-pink: #c2255c;
$color-grape: #9c36b5;
$color-violet: #6741d9;
$color-indigo: #3b5bdb;
$color-blue: #1971c2;
$color-cyan: #0c8599;
$color-teal: #099268;
$color-green: #2f9e44;
$color-lime: #66a80f;
$color-yellow: #f08c00;
$color-orange: #e8590c;

$colors: (
  'primary': $color-primary,
  'red': $color-red,
  'pink': $color-pink,
  'grape': $color-grape,
  'violet': $color-violet,
  'indigo': $color-indigo,
  'blue': $color-blue,
  'cyan': $color-cyan,
  'teal': $color-teal,
  'green': $color-green,
  'lime': $color-lime,
  'yellow': $color-yellow,
  'orange': $color-orange,
  'white': $color-white,
  'dark': $color-dark
);

$extra-colors: (
  'gray-dark': $color-dark,
  'gray': $color-gray,
  'gray-light': $color-gray-light,
  'twitter': #1da1f2,
  'facebook': #1877f2,
  'github': #181717,
  'dribbble': #ea4c89
);

$backgrounds: (
  gray: var(--color-gray),
  gray-light: var(--color-gray-light),
  base: var(--bg-primary),
  surface: var(--bg-primary),
);

$color-background: $color-white;

$color-muted: #515671;
$color-muted-light: lighten($color-muted, 10%);
$color-muted-dark: darken($color-muted, 10%);

$color-border: #dbdef0;
$color-border-light: lighten($color-border, 4%);
$color-border-hover: darken($color-border, 15%);

$color-highlight-bg: $color-dark;
$color-highlight-red: #ff8383;
$color-highlight-yellow: #ffe484;
$color-highlight-green: #b5f4a5;
$color-highlight-blue: #93ddfd;
$color-highlight-purple: #d9a9ff;


$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;
$font-weight-black: 700;
$font-weight-light: 300;

$tracking-tight: -.02em;
$tracking-wide: .04em;

$border-radius: .25rem;
$border-radius-lg: .375rem;
$border-radius-xl: .5rem;

$font-size-h0: px2rem(48px);
$font-size-h1: px2rem(32px);
$font-size-h2: px2rem(24px);
$font-size-h3: px2rem(20px);
$font-size-h4: px2rem(18px);
$font-size-h5: $font-size-base;
$font-size-h6: px2rem(14px);
$font-size-h7: px2rem(12px);

$line-height-h0: 3.25rem;
$line-height-h1: 2.5rem;
$line-height-h2: 2.25rem;
$line-height-h3: 1.75rem;
$line-height-h4: 1.5rem;
$line-height-h5: 1.25rem;
$line-height-h6: 1rem;
$line-height-h7: 1rem;

$gap-0: 0rem;
$gap-1: .25rem;
$gap-2: .5rem;
$gap-3: 1rem;
$gap-4: 1.5rem;
$gap-5: 2rem;
$gap-6: 4rem;
$gap-7: 6.5rem;
$gap-8: 10.5rem;

$gaps: (
  0: $gap-0,
  1: $gap-1,
  2: $gap-2,
  3: $gap-3,
  4: $gap-4,
  5: $gap-5,
  6: $gap-6,
  7: $gap-7,
  8: $gap-8,
);

$negative-gaps: (
  n0: -$gap-0,
  n1: -$gap-1,
  n2: -$gap-2,
  n3: -$gap-3,
  n4: -$gap-4,
  n5: -$gap-5,
  n6: -$gap-6,
  n7: -$gap-7,
  n8: -$gap-8,
);

$breakpoint-sm: 560px;
$breakpoint-md: 768px;
$breakpoint-lg: 960px;
$breakpoint-xl: 1280px;

$grid-breakpoints: (
  0: 0,
  'sm': $breakpoint-sm,
  'md': $breakpoint-md,
  'lg': $breakpoint-lg,
  'xl': $breakpoint-xl,
);

$container-max-width: px2rem(1280px);
$container-narrow-max-width: px2rem(990px);

$zindex-modal: 100;
$zindex-gototop: 90;
$zindex-header: 80;

$grid-padding: $gap-4;
$grid-columns: 12;

$header-height: 5rem;
$aside-width: 20rem;

$form-focus-color: $color-primary;
$form-check-size: 1rem;

$form-btn-height: 2.5rem;

$shadow-popover: 0 4px 56px rgb(12, 12, 12, 20%), 0 0 0 1px rgb(0, 0, 0, 5%);
$shadow-card-sm: 0 1px 2px 0 rgb(0, 0, 0, .05);
$shadow-card: 0 0 0 1px $color-border, 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015);
$shadow-card-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 10px 10px -5px rgba(0, 0, 0, .04);

$transition-duration-short: .2s;
$transition-duration: .5s;

$border-radius-values: (
  null: $border-radius,
  lg: $border-radius-lg,
  0: 0
);

$css-variables: (
  font-family: $font-families,
  color: map-merge($colors, $extra-colors),
  bg: $backgrounds,
);

$margin-gaps: map-merge($gaps, $negative-gaps);

$utilities: (
  "display": (
    responsive: true,
    print: true,
    property: display,
    class: d,
    values: none inline inline-block block flex table-cell
  ),
  "overflow": (
    class: o,
    property: overflow,
    values: hidden auto
  ),
  "color": (
    property: color,
    class: text,
    values: map-merge($colors, (
      muted: var(--color-muted, #{$color-muted}),
      headers: var(--color-headers, #{$color-headers}),
      reset: inherit
    ))
  ),
  "shadow": (
    property: box-shadow,
    class: shadow,
    values: (
      sm: $shadow-card-sm,
      null: $shadow-card,
      card: $shadow-card,
      lg: $shadow-card-lg,
    )
  ),
  "border-radius": (
    property: border-radius,
    class: rounded,
    values: $border-radius-values
  ),
  "border-radius-left": (
    property: border-top-left-radius border-bottom-left-radius,
    class: rounded-left,
    values: $border-radius-values
  ),
  "border-radius-right": (
    property: border-top-right-radius border-bottom-right-radius,
    class: rounded-right,
    values: $border-radius-values
  ),
  "background": (
    property: background,
    class: bg,
    values: map-merge($colors, (
      white: $color-white,
      light: $color-gray
    ))
  ),
  "text-transform": (
    property: text-transform,
    class: text,
    values: uppercase
  ),
  "text-align": (
    responsive: true,
    property: text-align,
    class: text,
    values: left center right
  ),
  "font-weight": (
    property: font-weight,
    class: font,
    values: (
      light: $font-weight-light,
      normal: $font-weight-normal,
      medium: $font-weight-medium,
      bold: $font-weight-bold,
      black: $font-weight-black
    )
  ),
  "font-family": (
    property: font-family,
    class: font,
    values: (
      monospaced: $font-family-monospace
    ),
  ),
  "text-decoration": (
    property: text-decoration,
    class: text,
    values: underline
  ),
  "line-height": (
    property: line-height,
    class: lh,
    values: (
      1: 1,
      sm: $line-height-sm,
      base: $line-height-base,
      h1: $line-height-h1,
      h2: $line-height-h2,
      h3: $line-height-h3,
      h4: $line-height-h4,
      h5: $line-height-h5,
      h6: $line-height-h6,
    )
  ),
  "font-size": (
    property: font-size,
    class: font,
    values: (
      h1: $font-size-h1,
      h2: $font-size-h2,
      h3: $font-size-h3,
      h4: $font-size-h4,
      h5: $font-size-h5,
      h6: $font-size-h6,
    )
  ),
  "position": (
    property: position,
    class: p,
    values: (sticky, relative, absolute)
  ),
  "flex": (
    responsive: true,
    property: flex,
    values: (fill: 1 1 auto)
  ),
  "flex-direction": (
    responsive: true,
    property: flex-direction,
    class: flex,
    values: row column row-reverse
  ),
  "justify-content": (
    responsive: true,
    property: justify-content,
    class: justify,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      between: space-between,
      //around: space-around,
      //evenly: space-evenly,
    )
  ),
  "align-items": (
    responsive: true,
    property: align-items,
    class: items,
    values: (
      start: flex-start,
      //end: flex-end,
      center: center,
      //baseline: baseline,
      //stretch: stretch,
    )
  ),
  "order": (
    responsive: true,
    property: order,
    values: (
      first: -1,
      //0: 0,
      //1: 1,
      //2: 2,
      //3: 3,
      //4: 4,
      //5: 5,
      last: 6,
    ),
  ),
  "margin": (
    responsive: true,
    property: margin,
    class: m,
    values: map-merge($margin-gaps, (auto: auto))
  ),
  "margin-x": (
    responsive: true,
    property: margin-right margin-left,
    class: mx,
    values: map-merge($margin-gaps, (auto: auto))
  ),
  "margin-y": (
    responsive: true,
    property: margin-top margin-bottom,
    class: my,
    values: map-merge($margin-gaps, (auto: auto))
  ),
  "margin-top": (
    responsive: true,
    property: margin-top,
    class: mt,
    values: map-merge($margin-gaps, (auto: auto))
  ),
  "margin-right": (
    responsive: true,
    property: margin-right,
    class: mr,
    values: map-merge($margin-gaps, (auto: auto))
  ),
  "margin-bottom": (
    responsive: true,
    property: margin-bottom,
    class: mb,
    values: map-merge($margin-gaps, (auto: auto))
  ),
  "margin-left": (
    responsive: true,
    property: margin-left,
    class: ml,
    values: map-merge($margin-gaps, (auto: auto))
  ),
  "padding": (
    responsive: true,
    property: padding,
    class: p,
    values: $gaps
  ),
  "padding-x": (
    responsive: true,
    property: padding-right padding-left,
    class: px,
    values: $gaps
  ),
  "padding-y": (
    responsive: true,
    property: padding-top padding-bottom,
    class: py,
    values: $gaps
  ),
  "padding-top": (
    responsive: true,
    property: padding-top,
    class: pt,
    values: $gaps
  ),
  "padding-right": (
    responsive: true,
    property: padding-right,
    class: pr,
    values: $gaps
  ),
  "padding-bottom": (
    responsive: true,
    property: padding-bottom,
    class: pb,
    values: $gaps
  ),
  "padding-left": (
    responsive: true,
    property: padding-left,
    class: pl,
    values: $gaps
  ),
  "border": (
    property: border,
    values: (
      0: none,
      null: 1px solid $color-border,
      light: 1px solid $color-border-light
    )
  ),
  "border-top": (
    property: border-top,
    values: (
      0: none,
      null: 1px solid $color-border,
      light: 1px solid $color-border-light
    )
  ),
  "border-right": (
    property: border-right,
    values: (
      0: none,
      null: 1px solid $color-border,
      light: 1px solid $color-border-light
    )
  ),
  "border-bottom": (
    property: border-bottom,
    values: (
      0: none,
      null: 1px solid $color-border,
      light: 1px solid $color-border-light
    )
  ),
  "border-left": (
    property: border-left,
    values: (
      0: none,
      null: 1px solid $color-border,
      light: 1px solid $color-border-light
    )
  ),
  "user-select": (
    property: user-select,
    class: select,
    values: all auto none
  ),
  "pointer-events": (
    property: pointer-events,
    values: none
  ),
  "width": (
    property: width,
    class: w,
    values: (
      1: 1%,
      100: 100%,
      auto: auto
    )
  ),
  "height": (
    property: height,
    class: h,
    values: (
      100: 100%,
      auto: auto
    )
  ),
  "ratio": (
    class: ratio,
    property: aspect-ratio,
    extra: (
      background-size: cover
    ),
    values: (
      '16x9': divide(16, 9),
      '9x16': divide(9, 16),
      '4x3': divide(4, 3),
      '3x4': divide(3, 4),
      '2x1': divide(2, 1),
      '1x2': divide(1, 2),
      '1x1': divide(1, 1),
    )
  )
);