/* Deprecated vars */
@borderLight: #CCC;
@borderDark: #666;

/* ----------------------------------------- */
/*  Fonts                                    */
/* ----------------------------------------- */

/* russo-one-regular - latin */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/RussoOne.ttf');
}
.russoOne(@font-size: 20px) {
  font-family: 'Russo One';
  font-size: @font-size;
  font-weight: 400;
}
/* engli-besh */
@font-face {
  font-family: 'Engli-Besh';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/EngliBesh-KG3W.ttf');
}
.engli-Besh {
  font-family: 'Engli-Besh';
  font-size: 20px;
  font-weight: 400;
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/OpenSans-Regular.ttf');
}
.openSans {
  font-family: 'Open Sans';
  font-size: 20px;
  font-weight: 400;
}

/* ----------------------------------------- */
/*  Sheet Styles                             */
/* ----------------------------------------- */

@colorDark: #191813;
@colorFaint: #c9c7b8;
@colorBeige: #b5b3a4;
@colorTan: #7a7971;
@colorOlive: #4b4a44;
@colorCrimson: #44191A;
@borderGroove: 2px groove #eeede0;
//@sheetBackground: url("ui/parchment.jpg") repeat;


//SW5e Colors
@colorBlack: #1C1C1C;
@colorDarkGray: #363636;
@colorGray: #4f4f4f;
@colorLightGray: #828282;
@colorPaleGray: #D6D6D6;
@colorRed: #c40f0f; 
@colorPaleRed: #FBF4F4;
@colorLightRed: #F6E1E1;
@colorBlue: #0d99cc;
@colorLightBlue: #7ed6f7;
@colorPaleBlue: #afc6d6;

@sheetBackground: linear-gradient(90deg, @colorPaleBlue 0%, @colorPaleGray 30%, @colorPaleGray 70%, @colorPaleBlue); //url("ui/parchment.webp") repeat;

/* ----------------------------------------- */
/*  Flexbox                                  */
/* ----------------------------------------- */

.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;

  > * {
    flex: 1;
  }

  .flex1 { flex: 1; }
  .flex2 { flex: 2; }
  .flex3 { flex: 3; }
  .flex4 { flex: 4; }
}

.flexcol {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  > * {
    flex: 1;
  }

  .flex1 { flex: 1; }
  .flex2 { flex: 2; }
  .flex3 { flex: 3; }
  .flex4 { flex: 4; }
}