@import "ratios";
@import "functions";
@import "breakpoints";

:root {

  // Font Family //
  --font-serif: Freight Text Pro,-apple-system-ui-serif, ui-serif,Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-monospace: IBM Plex Mono, SFMono-Regular, Consolas, Menlo, Andale, monospace;

  --font-family-body: var(--font-serif);
  --font-family-headings: var(--font-serif);
  --font-family-code: var(--font-monospace);

  // Size //
  --font-size: calc( .7em + 1.1vw );
  --line-height: var(--ratio-golden); 
  --type-scale: var(--ratio-minor-second);

  // Color //
//  --font-color-headings: hsla( var(--c10-h), var(--c10-s), var(--c10-l), .8);
  --font-color-headings: hsla(120 90% 10% / .7);// hsla( var(--c10-h), var(--c10-s), var(--c10-l), .8);
  --font-color-body: hsla(0 0% 0% / .7);

  @for $i from 1 through 9 {
    @if ( $i == 1 ) {
      --font-scale-1: calc( 1 / var(--type-scale) / var(--type-scale) );
    } @else {
      --font-scale-#{ $i }: calc( var(--font-scale-#{ $i - 1 }) * var(--type-scale) );//#{pow($ratio, 6 - $i)};
    }
  }
}

html {
	font-size: var(--font-size);
	font-family: var(--font-family-body);
  line-height: var(--line-height);
  color: var(--font-color-body);
}

h1, h2, h3, h4, h5, h6, legend, header {
  font-family: var(--font-family-headings);
  color: var(--font-color-headings);
}

@for $i from 1 through 6 {
  h#{$i} {
    font-size: calc( 1em * var(--font-scale-#{ 7 - $i }) );
  }
}


:root{
  @media screen and ( min-width: 0px ){
    --type-scale: var(--ratio-minor-second);
  }
  @media screen and (min-width: map-get($breakpoints,"mobile-mid")){
    --type-scale: var(--ratio-major-second);
  }
  @media screen and (min-width: map-get($breakpoints,"mobile-max")){
    --type-scale: var(--ratio-minor-third);
  }
  @media screen and (min-width: map-get($breakpoints,"tablet-max")){
    --type-scale: var(--ratio-major-third);
  }
  @media screen and (min-width: map-get($breakpoints,"desktop-min")){
    --type-scale: var(--ratio-perfect-fourth);
  }
}