/*----------- Layout -----------*/

/* Layout construction */

@base: {
  max-width: 960px;
  columns-name: col-;
  columns-total: 12;
  columns-halfgap: false;
  aperture: 1rem;
  marge: 1rem;
}

/* Media definition for media queries and grid. */

@media: {
  tablet: 760px;
  mobile: 500px;
}

@zindex: {
  dropdown: 1000;
  sticky: 1020;
  fixed: 1030;
  modal-backdrop: 1040;
  modal: 1050;
  popover: 1060;
  tooltip: 1070;
}

/**
 * For each font used; set up the different weight
 * and value. Each font need a new .font-weight
 * definition.
 */

@fonts: {
  @primary: {
    @name: 'Sans-serif';
    @weight: {
      @thin: 100;
      @extra-light: 200;
      @light: 300;
      @regular: 400;
      @bold: 500;
      @extra-bold: 700;
      @black: 900;
    }
  }

  @secondary: {
    @name: 'monospace';
    @weight: {
      @thin: 100;
      @extra-light: 200;
      @light: 300;
      @regular: 400;
      @bold: 500;
      @extra-bold: 700;
      @black: 900;
    }
  }
}

/*----------- Typography -----------*/

/**
 * About line height : Reference : https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height
 *
 */

@typography: {
  site-font-size: 16px;
  base-font-size: 1.065rem;
  /* Calculated line height.
  Reference : https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
  base-line-height: calc(4px + 2ex + 4px);
  /* Margin bottom is 65% of the font size */
  base-margin: 0.65em;
  base-type-ratio: @type-ratios[perfectFourth];
  mobile-type-ratio: @type-ratios[majorThird];
}

@headings: {
  margin-top: 1em;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: bold;

  @h1: {
    font-weight: @headings[font-weight];
  }

  @h2: {
    font-weight: @headings[font-weight];
  }

  @h3: {
    font-weight: @headings[font-weight];
  }

  @h4: {
    font-weight: @headings[font-weight];
  }

  @h5: {
    font-weight: @headings[font-weight];
  }

  @h6: {
    font-weight: normal;
  }
}

@paragraph-sizes: {
  pearl: -2;
  small-print: -1;
  cicero: 0;
  lead: 1;
  headline: 2;
  parangon: 3;
  canon: 4;
}

@type-ratios: {
  minorSecond: 1.067;
  majorSecond: 1.125;
  minorThird: 1.2;
  majorThird: 1.25;
  perfectFourth: 1.333;
  augmentedFourth: 1.414;
  perfectFifth: 1.5;
  goldenRatio: 1.618;
}

/*----------- Colors -----------*/

// Remove color scheme managment

@color-scheme: {
  dark: false
}

// Depreciated

@hues: {
  primary: 0;
  secondary: 220;
  success: 103;
  danger: 358;
  warning: 127;
  info: 127;
}

// These has to be rethinked

/*
  New disp =

  @colors: {
    Main site colors like:
    blue: blue;
    red: red;
  }

  @monochromatic: {
    primary: hsl(@hues[primary]; 81%; 58%);
    secondary: hsl(@hues[secondary]; 100%; 68%);
    text: hsl(@hues[primary]; 4%; 26%);
    border: hsl(@hues[primary]; 0%; 90%);
    background: hsl(@hues[primary]; 0%; 100%);
    primaryOffset: hsl(@hues[primary]; 100%; 68%);
    textOffset: hsl(@hues[primary]; 90%; 70%);
    backgroundOffset: hsl(@hues[primary]; 6%; 100%);
  }
*/

@colors: {
    // switch to "monochromatic"

  @light: {
    primary: hsl(@hues[primary]; 81%; 58%);
    secondary: hsl(@hues[secondary]; 100%; 68%);
    text: hsl(@hues[primary]; 4%; 26%);
    border: hsl(@hues[primary]; 0%; 90%);
    background: hsl(@hues[primary]; 0%; 100%);
    primaryOffset: hsl(@hues[primary]; 100%; 68%);
    textOffset: hsl(@hues[primary]; 90%; 70%);
    backgroundOffset: hsl(@hues[primary]; 6%; 100%);

    success: hsl(@hues[success]; 100%; 78%);
    danger: hsl(@hues[danger]; 100%; 56%);
  }

  @dark: {
    primary: hsl(@hues[primary]; 81%; 58%);
    secondary: hsl(@hues[secondary]; 100%; 68%);
    text: hsl(@hues[primary]; 4%; 92%);
    border: hsl(@hues[primary]; 0%; 30%);
    background: hsl(@hues[primary]; 0%; 15%);
    primaryOffset: hsl(@hues[primary]; 100%; 68%);
    textOffset: hsl(@hues[primary]; 90%; 70%);
    backgroundOffset: hsl(@hues[primary]; 6%; 100%);

    success: hsl(@hues[success]; 100%; 78%);
    danger: hsl(@hues[danger]; 100%; 56%);
  }
}

/*----------- Color Sets -----------*/

@set1: {
  @primary: #3d57eb;
  @secondary: spin(#3d57eb, -(360 / 3));
  @thirdary: spin(#3d57eb, (360 / 3));
}

@tints: {

  @tonic: {
    operation: saturate;
    amount: 10%;
    method: relative;
  }
  @ultratonic: {
    operation: saturate;
    amount: 20%;
    method: relative;
  }
  @dark: {
    operation: darken;
    amount: 80%;
    method: relative;
  }
  @gloom: {
    operation: darken;
    amount: 60%;
    method: relative;
  }
  @dusk: {
    operation: darken;
    amount: 40%;
    method: relative;
  }
  @major: {
    operation: tint;
    amount: 0%;
    method: false;
  }
  @mediant: {
    operation: lighten;
    amount: 20%;
    method: false;
  }
  @sensible: {
    operation: lighten;
    amount: 25%;
    method: false;
  }
  @minor: {
    operation: lighten;
    amount: 30%;
    method: false;
  }
  @brittle: {
    operation: lighten;
    amount: 40%;
    method: false;
  }
}
