@layer normalize, layout, branding, oneoffs;
@import url('./modern-normalize-min.css') layer(normalize);
@import url('./layout.css') layer(layout);
@import url('./branding.css') layer(branding);
@import url('./oneoffs.css') layer(oneoffs);

/* Fonts */
/* work-sans-200 - latin */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 200;
  src: local("Work Sans ExtraLight"), local("WorkSans-ExtraLight"), url("../fonts/work-sans-v5-latin-200.woff2") format("woff2"), url("../fonts/work-sans-v5-latin-200.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-regular - latin */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Work Sans"), local("WorkSans-Regular"), url("../fonts/work-sans-v5-latin-regular.woff2") format("woff2"), url("../fonts/work-sans-v5-latin-regular.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-700 - latin */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Work Sans Bold"), local("WorkSans-Bold"), url("../fonts/work-sans-v5-latin-700.woff2") format("woff2"), url("../fonts/work-sans-v5-latin-700.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Sitewide Vaiables */
:root{
    /*Size Scale*/
    --ratio: 1.5;
    --s-5: calc(1rem * pow(var(--ratio), -5));
    --s-4: calc(1rem * pow(var(--ratio), -4));
    --s-3: calc(1rem * pow(var(--ratio), -3));
    --s-2: calc(1rem * pow(var(--ratio), -2));
    --s-1: calc(1rem * pow(var(--ratio), -1));
    --s0: calc(1rem * pow(var(--ratio), 0));
    --s1: calc(1rem * pow(var(--ratio), 1));
    --s2: calc(1rem * pow(var(--ratio), 2));
    --s3: calc(1rem * pow(var(--ratio), 3));
    --s4: calc(1rem * pow(var(--ratio), 4));
    --s5: calc(1rem * pow(var(--ratio), 5));
    
    /*Layout Sizes*/
    --switcher-threshold: 60rem;
    --switcher-limit: 3;
    --measure: 120ch;

    /*Type Sizes*/
    --font-size-body: var(--s0);

    /*Colors*/
    --color-card-bg: hsl(156, 24%, 90%);
    --color-bright-bg: hsl(156,24%,75%);
    --color-dark-bg: hsl(156, 24%, 38%);
    --color-body-text: hsl(24, 11%, 9%);
    --color-accent: hsl(35, 100%, 61%);
    --color-accent1: hsl(291.69, 43.75%, 50%);
    --color-accent1: hsl(291.69, 43.75%, 50%);
}