//
// Variables
// --------------------------------------------------

//
// Transition
// -------------------------

$g-transition-duration: 0.25s !default;

//
// Links
// -------------------------

$g-link-transition: color 0.25s !default;
$g-link-hover-decoration: underline !default;

//
// Typography
// -------------------------

$g-font-primary: Inter;
$g-font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$g-font-family-base: $g-font-primary, $g-font-family-sans-serif !default;

// $g-font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
// $g-font-size-base effects the font size of the body text
$g-font-size-root: null !default;
$g-font-size-base: 1rem !default;
$g-line-height-base: 1.5 !default;

$g-text-styles: (
  'hero': (
    font-size: px-to-rem(64px),
    line-height: 72/64,
  ),
  'large-title': (
    font-size: px-to-rem(48px),
    line-height: 64/48,
  ),
  'title': (
    font-size: px-to-rem(32px),
    line-height: 48/32,
  ),
  'small-title': (
    font-size: px-to-rem(24px),
    line-height: 32/24,
  ),
  'subtitle': (
    font-size: px-to-rem(20px),
    line-height: 28/20,
  ),
  'large-body': (
    font-size: px-to-rem(18px),
    line-height: 26/18,
  ),
  'body': (
    font-size: $g-font-size-base,
    line-height: $g-line-height-base,
  ),
  'small': (
    font-size: px-to-rem(14px),
    line-height: 18/14,
  ),
  'tiny': (
    font-size: px-to-rem(12px),
    line-height: 16/12,
  ),
);

$g-headings-font-family: null !default;
$g-headings-margin-bottom: 1rem !default;
$g-headings-font-weight: 700 !default;
$g-headings-line-height: null !default;

$g-text-style-h1: 'large-title' !default;
$g-text-style-h1-sm: 'title' !default;
$g-text-style-h2: 'title' !default;
$g-text-style-h2-sm: 'small-title' !default;
$g-text-style-h3: 'small-title' !default;
$g-text-style-h4: 'large-body' !default;
$g-text-style-h5: 'body' !default;
$g-text-style-h6: 'small' !default;

//
// Font Sizing
//

$g-font-size-small: $g-font-size-base - px-to-rem(2px) !default;
$g-font-size-xsmall: $g-font-size-base - px-to-rem(4px) !default;
$g-font-size-2xsmall: $g-font-size-base - px-to-rem(6px) !default;
$g-font-size-medium: $g-font-size-base + px-to-rem(2px) !default;
$g-font-size-large: $g-font-size-base + px-to-rem(4px) !default;
$g-font-size-xlarge: $g-font-size-base + px-to-rem(8px) !default;

$g-hr-margin-ends: 1.5rem !default;

//
// Paragraphs
// -------------------------

$g-paragraph-margin-top: 1rem !default;

//
// Spacing
// -------------------------

// Gaps
//
// normal: 24px
// small:  16px
// xsmall: 8px
// 2xsmall: 4px
// medium: 32px
// large: 40px
// xlarge:  48px

$g-base-gap: 1.5rem !default;
$g-gaps: (
  normal: $g-base-gap,
  small: (
    $g-base-gap / 1.5,
  ),
  xsmall: (
    $g-base-gap / 3,
  ),
  2xsmall: (
    $g-base-gap / 6,
  ),
  medium: (
    $g-base-gap * (4 / 3),
  ),
  large: (
    $g-base-gap * (5 / 3),
  ),
  xlarge: (
    $g-base-gap * 2,
  ),
);

// Paddings
//
// medium: 40px | large: 48px | xlarge: 64px | 2xlarge: 96px
// normal: 32px
// small: 24px | xsmall: 16px | 2xsmall: 8px

$g-base-padding: 2rem !default;
$g-pads: (
  normal: $g-base-padding,
  small: (
    $g-base-padding * 0.75,
  ),
  xsmall: (
    $g-base-padding / 2,
  ),
  2xsmall: (
    $g-base-padding / 4,
  ),
  medium: (
    $g-base-padding * 1.25,
  ),
  large: (
    $g-base-padding * 1.5,
  ),
  xlarge: (
    $g-base-padding * 2,
  ),
  2xlarge: (
    $g-base-padding * 3,
  ),
);

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
// -------------------------

// While SCSS Starter uses ems or rems for defining most sizes,
// `px`s are used for grid breakpoints and container widths.
// This is because the viewport width is in pixels and does not change with the font size.
// See: https://drafts.csswg.org/mediaqueries-3/#units

// stylelint-disable-next-line meowtec/no-px
$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
) !default;

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

// stylelint-disable-next-line meowtec/no-px
$container-max-widths: (
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1168px,
) !default;

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12 !default;
$grid-gutter-width: px-to-rem(16px) !default;

// `z-index` values
//
//  Global `z-index` values should be defined below
// -------------------------

$g-z-index-header-menu: 3;
$g-z-index-header-search: 2;
