// Modular Scale

// Classical base ratios
$double-octave    : 4            ;
$pi               : 3.14159265359;
$major-twelfth    : 3            ;
$major-eleventh   : 2.666666667  ;
$major-tenth      : 2.5          ;
$octave           : 2            ;
$major-seventh    : 1.875        ;
$minor-seventh    : 1.777777778  ;
$major-sixth      : 1.666666667  ;
$phi              : 1.618034     ;
$golden           : $phi         ;
$minor-sixth      : 1.6          ;
$fifth            : 1.5          ;
$augmented-fourth : 1.41421      ;
$fourth           : 1.333333333  ;
$major-third      : 1.25         ;
$minor-third      : 1.2          ;
$major-second     : 1.125        ;
$minor-second     : 1.066666667  ;

// Switch:
// if true: the browser will calculate sizes using (lot's of) calc
// if false: SCSS will calculate the sizes!
$css-calc    : css-detailed !default;

// Space base settings
$space-base  : .25rem !default;
$space-ratio : $major-tenth !default;    // 2.5

// Typography base settings
$text-base   : 1em !default;             // 16px @ 100% body text, this needs to be EM for text-size-all
$text-ratio  : $minor-third !default;    // 1.2



// CSS Vars definition
:root {

  // Space scale 
  // for paddings & margins, for boxes and page layout
  // Modular scale — all your BASE (and RATIO) are belong to us!

  --space-base  : #{$space-base};
  --space-ratio : #{$space-ratio};
  --text-base   : #{$text-base};
  --text-ratio  : #{$text-ratio};

  // Layout scale
  @if $css-calc == "css" {
    
    // This is the standard way
    --space-xs  : var(--space-base);                             // bigger ⤵
    --space-s   : calc(var(--space-ratio) * var(--space-xs));
    --space-m   : calc(var(--space-ratio) * var(--space-s));
    --space-l   : calc(var(--space-ratio) * var(--space-m));
    --space-xl  : calc(var(--space-ratio) * var(--space-l));
    --space-xxl : calc(var(--space-ratio) * var(--space-xl));

  } @else if $css-calc == "css-detailed" {

    // This does the same as above, 
    // but you can better the calc of the calc
    // It's an attempt to solve issues with MS Edge
    // Idea by Manuel Lehmann
    --space-xs  :                                                                                                                        var(--space-base);
    --space-s   : calc(                                                                                             var(--space-ratio) * var(--space-base) );
    --space-m   : calc(                                                                      var(--space-ratio) * ( var(--space-ratio) * var(--space-base) ));
    --space-l   : calc(                                               var(--space-ratio) * ( var(--space-ratio) * ( var(--space-ratio) * var(--space-base) )));
    --space-xl  : calc(                        var(--space-ratio) * ( var(--space-ratio) * ( var(--space-ratio) * ( var(--space-ratio) * var(--space-base) ))));
    --space-xxl : calc( var(--space-ratio) * ( var(--space-ratio) * ( var(--space-ratio) * ( var(--space-ratio) * ( var(--space-ratio) * var(--space-base) )))));


  } @else {

    --space-xs  : #{$space-base};
    $space-s    : $space-ratio * $space-base;
    --space-s   : #{$space-s};
    $space-m    : $space-ratio * $space-s;
    --space-m   : #{$space-m};
    $space-l    : $space-ratio * $space-m;
    --space-l   : #{$space-l};
    $space-xl   : $space-ratio * $space-l;
    --space-xl  : #{$space-xl};
    $space-xxl  : $space-ratio * $space-xl;
    --space-xxl : #{$space-xxl};

  }

  // EXTRA: Hairline borders

  --space-px    : 1px;
  //@media (min-resolution: 2dppx) { --space-px  : .5px   }
  //@media (min-resolution: 3dppx) { --space-px  : .333px }
  //@media (min-resolution: 4dppx) { --space-px  : .25px  }

  // Text scale
  @if $css-calc == true {

    --text-xxxl : calc(var(--text-ratio) * var(--text-xxl));       
    --text-xxl  : calc(var(--text-ratio) * var(--text-xl));        
    --text-xl   : calc(var(--text-ratio) * var(--text-l));         
    --text-l    : calc(var(--text-ratio) * var(--text-m));        // bigger  ⤴
    --text-m    : var(--text-base);                               // base
    --text-s    : calc(var(--text-m)     / var(--text-ratio));    // smaller ⤵
    --text-xs   : calc(var(--text-s)     / var(--text-ratio));

  } @else {

    $text-m     : $text-base;
    --text-m    : #{$text-m};
    $text-s     : $text-m / $text-ratio;
    --text-s    : #{$text-s};
    $text-xs    : $text-s / $text-ratio;
    --text-xs   : #{$text-xs};
    $text-l     : $text-ratio * $text-m;
    --text-l    : #{$text-l};
    $text-xl    : $text-ratio * $text-l;
    --text-xl   : #{$text-xl};
    $text-xxl   : $text-ratio * $text-xl;
    --text-xxl  : #{$text-xxl};
    $text-xxxl  : $text-ratio * $text-xxl;
    --text-xxxl : #{$text-xxxl};

  }
}