// stylelint-disable max-line-length, number-leading-zero, number-no-trailing-zeros
// stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case

// Variables

// Font faces, stacks and sizes.

// Font styling and line heights are controlled by the several variables that
// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
// These variable and mixins are documented on the [Typey
// homepage](https://github.com/jptaranto/typey).

// The font size set on the root html element.
// Specify unitless, it will be recalculated as %.
$base-font-size:      18;

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

// The pt font-size to be used for printing.
$print-font-size:     12pt;

// 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:      2.778rem,
  xxxl:       2.335rem,
  xxl:        2rem,
  xl:         1.556rem,
  l:          1.223rem,
  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(1.80rem, calc(1.45rem + 1.73vw), 2.80rem),
  xxxl:       clamp(1.60rem, calc(1.35rem + 1.27vw), 2.33rem),
  xxl:        clamp(1.42rem, calc(1.24rem + 0.90vw), 1.94rem),
  xl:         clamp(1.27rem, calc(1.14rem + 0.62vw), 1.62rem),
  l:          clamp(1.13rem, calc(1.05rem + 0.39vw), 1.35rem),
  m:          1rem,
  s:          0.889rem,
  xs:         0.778rem,
);

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

// Font weights.
// Use like this: var(--fw-normal)
$font-weight: (
  bolder:     900,
  bold:       700,
  medium:     500,
  normal:     400,
  light:      300,
  lighter:    200,
);

// The following font family declarations use widely available fonts.
// A user's web browser will look at the comma-separated list and will
// attempt to use each font in turn until it finds one that is available
// on the user's computer. The final "generic" font (sans-serif, serif or
// monospace) hints at what type of font to use if the web browser doesn't
// find any of the fonts in the list.

// Serif font stacks.
$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
$times:           Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
$georgia:         Georgia, 'Times New Roman', 'DejaVu Serif', serif;
$garamond:        Garamond, Charter, 'Times New Roman', serif;

// Sans-serif font stacks.
$verdana:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
$tahoma:          Tahoma, Verdana, 'DejaVu Sans', sans-serif;
$helvetica:       Helvetica, Arial, 'Nimbus Sans L', sans-serif;
$lucida:          'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
$futura:          Futura, 'Century Gothic', AppleGothic, sans-serif;

// System-ui font stack.
$system-ui:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

// Monospace font stacks.
// For an explanation of why "sans-serif" is at the end of this list, see
// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
$menlo:           Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;

// Font family.
// Use like this: var(--ff-body)
$font-family: (
  body:       $garamond,
  headings:   $futura,
  alt:        $system-ui,
  monospace:  $menlo,
);

// Breakpoints
// 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,
);

// Border radius.
// Use like this: var(--radius-m)
$border-radius: (
  l:          1rem,
  m:          0.3rem,
  s:          3px,
);

// Spacing.
// Use like this: var(--space-m)
$spacing: (
  xxxl:       5rem,
  xxl:        3rem,
  xl:         2rem,
  l:          1.5rem,
  m:          1rem,
  s:          0.75rem,
  xs:         0.5rem,
  xxs:        0.4rem,
  xxxs:       0.3rem,
);

// 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 "stetch" to strech out to the page edge.
// $max-page-width:      1111px;

// The max line width for readability.
$max-line-width:      70ch;

// The left/right gutter/padding.
$gutters:             calc(5px + 1.5625vw);
$gutters-reverse:     calc(0px - (5px + 1.5625vw));

// The amount lists, blockquotes and comments are indented.
$indent-amount:       2rem;

// Control whether RTL styles are added.
$include-rtl: false;