/**
 * Default animation custom properties
 */
:root {
  --animationDurationPrimary: .1s;
  --animationDurationSecondary: .2s;
  --animationDurationTertiary: .3s;
  --animationEasingPrimary:
    cubic-bezier(
      .25,
      .1,
      .25,
      1
    ); /* Ease in - out */

  --animationEasingSecondary:
    cubic-bezier(
      .68,
      -.55,
      .265,
      1.55
    ); /* Bounce */
}
/**
 * Default breakpoint custom properties and media queries
 */
@custom-media --bp1 (min-width: 20rem);
@custom-media --bp2 (min-width: 30rem);
@custom-media --bp3 (min-width: 42.5rem);
@custom-media --bp4 (min-width: 60rem);
@custom-media --bp5 (min-width: 71.25rem);

:root {
  --bp1: calc(320 / 16 * 1rem);
  --bp2: calc(480 / 16 * 1rem);
  --bp3: calc(680 / 16 * 1rem);
  --bp4: calc(960 / 16 * 1rem);
  --bp5: calc(1140 / 16 * 1rem);
}
/**
 * Default UI custom properties
 */
:root {
  --borderStyle: solid;
  --borderWidth: 1px;
  --radius: 5px;
}
/**
 * Default typography custom properties
 */
:root {
  /**
   * Modular scale
   * Configure at https://www.modularscale.com
   */
  --ms-1:                   14; /* 0.875rem; */
  --ms-2:                   12; /* 0.75rem; */
  --ms-3:                   10; /* 0.625rem; */
  --ms0:                    16; /* 1rem; */
  --ms1:                    18; /* 1.125rem; */
  --ms2:                    20; /* 1.25rem; */
  --ms3:                    24; /* 1.5rem; */
  --ms4:                    28; /* 1.75rem; */
  --ms5:                    32; /* 2rem; */
  --ms6:                    36; /* 2.25rem; */
  --ms7:                    42; /* 2.625rem; */
  --ms8:                    48; /* 3rem; */
  --ms9:                    56; /* 3.5rem; */
  --ms10:                   64; /* 4rem; */
  --ms11:                   72; /* 4.5rem; */
  --ms12:                   96; /* 6rem; */

  /**
   * Font properties
   */
  --fontFamilyPrimary:    sans-serif;
  --fontFamilySecondary:  serif;
  --fontSizePrimary:      16;
  --fontWeightPrimary:    400;
  --fontWeightSecondary:  700;
  --fontWeightTertiary:   300;
  --lineHeightPrimary:    1.5;

  /**
   * The baseline unit is a global unit used to calculate
   * the perfect line-height based on the primary font-size and line-height.
   * In this case:
   * 16 x 1,5 = 24
   */
  --baselineUnit:          calc(var(--fontSizePrimary) * var(--lineHeightPrimary));

  /**
   * Typography
   */
  --h1FontFamily:                          var(--fontFamilyPrimary);
  --h1FontSizeBase:                        calc(var(--ms6) / var(--fontSizePrimary));
  --h1FontSize:                            calc(var(--h1FontSizeBase) * 1rem);
  --h1FontWeight:                          var(--fontWeightSecondary);
  --h1LineHeight:                          1.25;
  --h1MarginBottom:                        1rem;

  --h2FontFamily:                          var(--fontFamilyPrimary);
  --h2FontSizeBase:                        calc(var(--ms4) / var(--fontSizePrimary));
  --h2FontSize:                            calc(var(--h2FontSizeBase) * 1rem);
  --h2FontWeight:                          var(--fontWeightSecondary);
  --h2LineHeight:                          1.25;
  --h2MarginBottom:                        1rem;

  --h3FontFamily:                          var(--fontFamilyPrimary);
  --h3FontSizeBase:                        calc(var(--ms3) / var(--fontSizePrimary));
  --h3FontSize:                            calc(var(--h3FontSizeBase) * 1rem);
  --h3FontWeight:                          var(--fontWeightSecondary);
  --h3LineHeight:                          1.5;
  --h3MarginBottom:                        1rem;

  --h4FontFamily:                          var(--fontFamilyPrimary);
  --h4FontSizeBase:                        calc(var(--ms0) / var(--fontSizePrimary));
  --h4FontSize:                            calc(var(--h4FontSizeBase) * 1rem);
  --h4FontWeight:                          var(--fontWeightSecondary);
  --h4LineHeight:                          1.5;
  --h4MarginBottom:                        1rem;

  --h5FontFamily:                          var(--fontFamilyPrimary);
  --h5FontSizeBase:                        calc(var(--ms0) / var(--fontSizePrimary));
  --h5FontSize:                            calc(var(--h5FontSizeBase) * 1rem);
  --h5FontWeight:                          var(--fontWeightSecondary);
  --h5LineHeight:                          1.5;
  --h5MarginBottom:                        1rem;

  --h6FontFamily:                          var(--fontFamilyPrimary);
  --h6FontSizeBase:                        calc(var(--ms0) / var(--fontSizePrimary));
  --h6FontSize:                            calc(var(--h6FontSizeBase) * 1rem);
  --h6FontWeight:                          var(--fontWeightSecondary);
  --h6LineHeight:                          1.5;
  --h6MarginBottom:                        1rem;

  --baseIndent:                            2rem;
  --baseLineHeight:                        1.5;
  --baseMarginBottom:                      1rem;

  --blockquoteFontSizeBase:                calc(var(--ms2) / var(--fontSizePrimary));
  --blockquoteFontSize:                    calc(var(--blockquoteFontSizeBase) * 1rem);
  --blockquoteFontStyle:                   normal;
  --blockquoteLineHeight:                  1.25;
  --blockquoteMarginBottom:                1rem;

  --smallFontSize:                         calc(var(--ms-1) / var(--fontSizePrimary) * 1rem);
  --smallLineHeight:                       1;
  --smallMarginBottom:                     0;

  --horizontalRuleBorderColor:             var(--colorNeutral200);
  --horizontalRuleBorderStyle:             solid;
  --horizontalRuleBorderWidth:             1px 0 0;
  --horizontalRuleMarginBottom:            1rem;

  --linkColorFocus:                        var(--colorPrimary500);
  --linkColorHover:                        var(--colorPrimary500);
  --linkColorVisited:                      var(--colorPrimary);
  --linkColor:                             var(--colorPrimary);
  --linkDecorationHover:                   underline;
  --linkDecoration:                        underline;
  --linkFontWeight:                        bold;
  --linkOutlineFocus:                      thin dotted;
  --linkOutline:                           0;
  --linkTransition:                        none;
}
/**
 * Default page custom properties
 */
:root {
  --htmlBackgroundColor: var(--colorWhite);
  --htmlFontFamily: var(--fontFamilyPrimary);
  --htmlFontSize: var(--fontSizePrimary);
  --htmlFontWeight: var(--fontWeightPrimary);
  --htmlLineHeight: var(--lineHeightPrimary);
  --htmlOverflowY: scroll;
  --htmlBoxSizing: border-box;
  --htmlHeight: 100%;
  --bodyColor: var(--colorNeutral800);
  --bodySelectionBackgroundColor: var(--colorPrimary100);
  --bodySelectionColor: var(--colorPrimary800);
  --bodySelectionTextShadow: none;
}
/**
 * Default color custom properties
 */
:root {
  /* Neutrals */
  --colorWhite: #fff;
  --colorBlack: #000;
  --colorNeutral100: #edf0f2;
  --colorNeutral200: #dfe5ea;
  --colorNeutral300: #aeb3bb;
  --colorNeutral400: #9399a4;
  --colorNeutral500: #77808d;
  --colorNeutral600: #5c6677;
  --colorNeutral700: #414d60;
  --colorNeutral800: #414d60;
  --colorNeutral900: #263349;

  /* Primaries */
  --colorPrimary: #009;
  --colorPrimary100: #d9e1f9;
  --colorPrimary200: #b9c4f0;
  --colorPrimary300: #99a7e7;
  --colorPrimary400: #798bdd;
  --colorPrimary500: #596ed4;
  --colorPrimary600: #3951cb;
  --colorPrimary700: #1e1fb7;
  --colorPrimary800: #009;
  --colorPrimary900: #000069;

  /* States */
  --colorError: #ff4136;
  --colorSuccess: #2ecc40;
  --colorNotice: #3951cb;
}
/**
 * Default form custom properties
 */
:root {
  --fieldsetBorder: 0;
  --fieldsetMarginBottom: 1rem;
  --labelFontSize: var(--smallFontSize);
  --labelLineHeight: var(--smallLineHeight);
  --labelMarginBottom: .25rem;
  --legendFontSize: var(--baseFontSize);
  --legendLineHeight: var(--baseLineHeight);
  --legendMarginBottom: 1rem;
  --placeholderColor: var(--colorNeutral500);
  --placeholderFontFamily: var(--fontFamilyPrimary);
  --placeholderFontStyle: italic;
}
/*
  Default grid properties
*/
:root {
  --gridMaxWidth: var(--bp5);
  --gridGutter: 1rem;
}
/**
 * Default spacing custom properties
 */
:root {
  --spacingBase: 1rem;
  --spacingLarge: 3rem;
}
/*
  Default video and embed properties
*/
:root {
  --mediaEmbedRatio: 62.5%;
  --mediaEmbedMarginBottom: 1rem;
}
/*
  Default frame properties
*/
:root {
  --frameLeftWidth: 17.1875rem; /* 275px */
  --frameRightWidth: 17.1875rem; /* 275px */
}