/* Variables
These need to be sass variables since they are used in sass functions and mixins.
Override sass variables in "assets/sass/_extra.scss" */

// Base line height, unitless.
$base-line-height: 1.5;

/* The font sizes in our type hierarchy as tee shirt sizes.
Size m is base.
Use like this: var(--fs-m) */
$font-size-fixed: (
  xxxxl:      3rem,
  xxxl:       2.5rem,
  xxl:        2rem,
  xl:         1.5rem,
  l:          1.25rem,
  m:          1rem,
  s:          0.889rem,
  xs:         0.778rem,
);

/* The responsive font sizes in our type hierarchy as tee shirt sizes.
Size m is base.
Use like this: var(--fs-m) */
$font-size-fluid: (
  xxxxl:      clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem),
  xxxl:       clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem),
  xxl:        clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem),
  xl:         clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem),
  l:          clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem),
  m:          1rem,
  s:          0.889rem,
  xs:         0.778rem,
);

/* Set the font sizes to use, fixed or fluid.
$font-size: $font-size-fluid; */
$font-size: $font-size-fixed;

/* Breakpoints (Deprecated in v5, use css @media directly instead.)
Use the `respond-to(s)` mixin to use named breakpoints. */
$breakpoints: (
  'xxxl':     1222px,
  'xxl':      1111px,
  'xl':       999px,
  'l':        888px,
  'm':        777px,
  's':        666px,
  'xs':       555px,
  'xxs':      444px,
  'xxxs':     333px,
);

/* Spacing
Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
mx--m (mx = margin-block) classes. */
$spacing: (
  xxl:        3,
  xl:         2,
  l:          1.5,
  m:          1,
  s:          0.75,
  xs:         0.5,
  xxs:        0.3,
  0:          0,
);

// The max content width. (Consider using one of the breakpoints.)
$max-content-width: 1111px;

/* The max page width. Defaults to max-content-width.
Setting this to a larger value than max-content-width allows
content with class "stretch" to stretch out to the page edge. */
$max-page-width: $max-content-width;