/*
############     _font-size.scss      ############
Font size variables
*/
@use "../1-settings/class-vars";

#{class-vars.$base-class} {
  --normal-font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Helvetica, sans-serif;
  --fixed-width-font-family: 'Source Code Pro', monospace;

  --font-size-2xs: .8125rem; //13
  --font-size-xs:  .875rem;  //14
  --font-size-s:   .9375rem; //15
  --font-size:     1rem;     //16
  --font-size-m:   1.125rem; //18
  --font-size-l:   1.25rem;  //20
  --font-size-xl:  1.5rem;   //24
  --font-size-2xl: 1.75rem;  //28
  --font-size-3xl: 2rem;     //32
  --font-size-4xl: 2.5rem;   //40
  --font-size-5xl: 3rem;     //48
  --font-size-6xl: 3.5rem;   //56
  --font-size-7xl: 4.5rem;   //72

  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  .font-size-2xs { font-size: var(--font-size-2xs); }
  .font-size-xs  { font-size: var(--font-size-xs);  }
  .font-size-s   { font-size: var(--font-size-s);   }
  .font-size     { font-size: var(--font-size);     }
  .font-size-m   { font-size: var(--font-size-m);   }
  .font-size-l   { font-size: var(--font-size-l);   }
  .font-size-xl  { font-size: var(--font-size-xl);  }
  .font-size-2xl { font-size: var(--font-size-2xl); }
  .font-size-3xl { font-size: var(--font-size-3xl); }
  .font-size-4xl { font-size: var(--font-size-4xl); }
  .font-size-5xl { font-size: var(--font-size-5xl); }
  .font-size-6xl { font-size: var(--font-size-6xl); }
  .font-size-7xl { font-size: var(--font-size-7xl); }

  .font-extra-light { font-weight: var(--font-weight-extra-light); }
  .font-light { font-weight: var(--font-weight-light); }
  .font-normal { font-weight: var(--font-weight-normal); }
  .font-semi-bold { font-weight: var(--font-weight-semi-bold); }
  .font-bold { font-weight: var(--font-weight-bold); }
  .font-black { font-weight: var(--font-weight-black); }
}