@import "main";

:root {
  //spacers
  --spacer: .5rem;

  //layout
  --wrapS: 56.25rem;      //900px
  --wrapM: 75rem;         //1200px
  --wrapL: 100rem;        //1600px
  --wrap: var(--wrapL);

  //calculate
  --calcWidth: calc((100vw - 30rem) / (75 - 30));

  //typography
  //font
  --fontFamily: "Hind", helvetica, sans-serif;

  //sizes
  --fontSizeH1Min: 2;
  --fontSizeH1Max: 3;
  --fontSizeH2Min: 1.5;
  --fontSizeH2Max: 2;
  --fontSizeH3Min: 1.25;
  --fontSizeH3Max: 1.5;
  --fontSizeH4Min: 1;
  --fontSizeH4Max: 1;
  --fontSizeH5Min: .9;
  --fontSizeH5Max: .9;
  --fontSizeSmallMin: .75;
  --fontSizeSmallMax: .75;
  --fontSizeParagraphMin: .8;
  --fontSizeParagraphMax: .9;
  --fontSizeNavMin: .9;
  --fontSizeNavMax: .9;
  --fontSizeButtonMin: 1;
  --fontSizeButtonMax: 1;

  //font-weight
  .typoPrepare(Weight, Light, 300);
  .typoPrepare(Weight, Regular, normal);
  .typoPrepare(Weight, Medium, 500);
  .typoPrepare(Weight, Bold, bold);
  .typoPrepare(Weight, Black, 900);

  //line-height
  --lineHeightSmall: calc(var(--lineHeightBase) * .75);
  --lineHeightBase: calc(var(--spacer) * 3);
  --lineHeightLarge: calc(var(--lineHeightBase) * 1.25);
  --lineHeightExtraLarge: calc(var(--lineHeightBase) * 1.5);

  //colors
  .colorPrepare(primary, #1A1A44);
  .colorPrepare(secondary, #0AF17A);
  .colorPrepare(typography, #1A1A44);
  .colorPrepare(black, #000000);
  .colorPrepare(white, #ffffff);
  .colorPrepare(light, #f2f2f2);

  //hoverStates
  .colorPrepare(primaryHover, #0e0e36);
  .colorPrepare(secondaryHover, #0a9d51);
  .colorPrepare(typographyHover, #ffffff);
  .colorPrepare(blackHover, #ffffff);
  .colorPrepare(whiteHover, #000000);
  .colorPrepare(lightHover, #dadada);

  --transparentWhite: rgba(255, 255, 255, .65);
  --transparentDark: rgba(0, 0, 0, .3);
  --shadow: .15rem .15rem .25rem 0 rgb(0 0 0 / 10%);

  //gradients
  --secondaryGradient: linear-gradient(90deg, rgba(#e79020, 1) 0%, rgba(#9f5a00, 1) 100%);
  --secondaryToTransparent: linear-gradient(90deg, rgba(#e79020, 1) 0%, rgba(#9f5a00, 0) 100%);

  //images
  --scrollImage: url("https://res.cloudinary.com/patrik-vadura/image/upload/v1648193126/Finom%20Sport/icon_scroll_down_oqwlif.svg");
}