:root {
  // Spacings
  --s1: .5rem;
  --s2: 1rem;
  --rc: .5rem; //radius corners

  // Borders
  --br: 0.25rem; //border radius
  --bw: 0.0625rem; //border width
  --ow: 0.1875rem; //outline width

  // Responsives spacings
  @if $enable-responsive-spacings {
    // Sectionning
    body > header,
    body > main,
    body > footer,
    section {
      @if map-get($breakpoints, "sm") {
        @media (min-width: map-get($breakpoints, "sm")) {
          --s1: .5rem;
        }
      }
      @if map-get($breakpoints, "md") {
        @media (min-width: map-get($breakpoints, "md")) {
          --s1: .6rem;
        }
      }
      @if map-get($breakpoints, "lg") {
        @media (min-width: map-get($breakpoints, "lg")) {
          --s1: .7rem;
        }
      }
      @if map-get($breakpoints, "xl") {
        @media (min-width: map-get($breakpoints, "xl")) {
          --s1: .8rem;
        }
      }
    }
  }
}
// Document: Content-box & Responsive typography

// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
*,
*::before,
*::after {
  box-sizing: border-box; // 1
}

// 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Add vertical alignment inheritance in all browsers (opinionated)
//::before,
//::after {
//  text-decoration: inherit; // 1
//  vertical-align: inherit; // 2
//}

// 1. Correct the line height in all browsers
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
// 4. Change the default tap highlight to be completely transparent in iOS
// 5. Use the default cursor in all browsers (opinionated)
// 6. Use a 4-space tab width in all browsers (opinionated)
html {
  text-rendering: optimizeLegibility;
  background-color: var(--c1);
  color: var(--f1);
  font-family: var(--ff);
  font-weight: var(--fw);
  font-size: var(--fs);
  line-height: var(--lh); // 1
//  -ms-text-size-adjust: 100%; // 2
//  -webkit-text-size-adjust: 100%; // 3
//  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
//  cursor: default; // 5
//  tab-size: 4; // 6
}