// Put scss variables here

// ----------------------------------
// Grid
// ----------------------------------
// Grid breakpoints
$breakpoints: (
  mobile: 0,
  tablet: 600px,
  desktop: 1024px,
  large: 1440px,
) !default;

// Grid containers
$container-max-widths: (
  mobile: 100%,
  tablet: 95%,
  desktop: 992px,
  large: 1320px,
) !default;

// Grid columns
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
$grid-columns: 12 !default;

// ----------------------------------
// Typography
// ----------------------------------
$typography: (
  display-1: (
    weight: 700,
    size: 8,
    line-height: 1.5,
  ),
  display-2: (
    weight: 700,
    size: 7,
    line-height: 1.2,
  ),
  h1: (
    weight: 700,
    size: 5,
    line-height: 1.7,
    tag: true,
  ),
  h2: (
    weight: 500,
    size: 4,
    line-height: 1.6,
    tag: true,
  ),
  h3: (
    weight: 500,
    size: 3,
    line-height: 1.5,
    tag: true,
  ),
  h4: (
    weight: 600,
    size: 2,
    line-height: 1.5,
    tag: true,
  ),
  h5: (
    weight: 700,
    size: 1,
    line-height: 1.5,
    tag: true,
  ),
  h6: (
    weight: 700,
    size: 0,
    line-height: 1.5,
    tag: true,
  ),
  body: (
    weight: 400,
    size: 0,
    line-height: 1.5,
  ),
) !default;

// ----------------------------------
// Colors
// ----------------------------------
// Sass variables are used to generate CSS variables.
$color-shades: 9 !default;
$color-categories: primary, secondary, success, critical, neutral !default;
$color-categories-extreme: darkest, lightest !default;