/**
 * Copyright (c) Matthieu Jabbour. All Rights Reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

@import url('https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2');
@font-face {
  font-family: 'Material Icons';
  src: url(https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
    format('woff2');
}

$colors: (
  primary: (
    main: #6204ea,
    on: #ffffff,
  ),
  secondary: (
    main: #03dac6,
    on: #000000,
  ),
  warning: (
    main: orange,
    on: #ffffff,
  ),
  error: (
    main: #e6261f,
    on: #ffffff,
  ),
  background: (
    main: #ffffff,
    on: #000000,
  ),
) !default;

$breakpoints: (
  xl: (max-width: 5000px),
  l: (max-width: 2500px),
  m: (max-width: 1920px),
  s: (max-width: 500px),
  xs: (max-width: 320px),
) !default;

$elevations: (
  0: (
    umbra: 0px 0px 0px 0px #00000034,
    penumbra: 0px 0px 0px 0px #00000024,
    ambiant: 0px 0px 0px 0px #0000001f,
  ),
  1: (
    umbra: 0px 2px 1px -1px #00000034,
    penumbra: 0px 1px 1px 0px #00000024,
    ambiant: 0px 1px 3px 0px #0000001f,
  ),
  2: (
    umbra: 0px 3px 1px -2px #00000034,
    penumbra: 0px 2px 2px 0px #00000024,
    ambiant: 0px 1px 5px 0px #0000001f,
  ),
  3: (
    umbra: 0px 3px 3px -2px #00000034,
    penumbra: 0px 3px 4px 0px #00000024,
    ambiant: 0px 1px 8px 0px #0000001f,
  ),
  4: (
    umbra: 0px 2px 4px -1px #00000034,
    penumbra: 0px 4px 5px 0px #00000024,
    ambiant: 0px 1px 10px 0px #0000001f,
  ),
  5: (
    umbra: 0px 3px 5px -1px #00000034,
    penumbra: 0px 5px 8px 0px #00000024,
    ambiant: 0px 1px 14px 0px #0000001f,
  ),
  6: (
    umbra: 0px 3px 5px -1px #00000034,
    penumbra: 0px 6px 10px 0px #00000024,
    ambiant: 0px 1px 18px 0px #0000001f,
  ),
  7: (
    umbra: 0px 4px 5px -2px #00000034,
    penumbra: 0px 7px 10px 1px #00000024,
    ambiant: 0px 2px 16px 1px #0000001f,
  ),
  8: (
    umbra: 0px 5px 5px -3px #00000034,
    penumbra: 0px 8px 10px 1px #00000024,
    ambiant: 0px 3px 14px 2px #0000001f,
  ),
  9: (
    umbra: 0px 5px 6px -3px #00000034,
    penumbra: 0px 9px 12px 1px #00000024,
    ambiant: 0px 3px 16px 2px #0000001f,
  ),
  10: (
    umbra: 0px 6px 6px -3px #00000034,
    penumbra: 0px 10px 14px 1px #00000024,
    ambiant: 0px 4px 18px 3px #0000001f,
  ),
  11: (
    umbra: 0px 6px 7px -4px #00000034,
    penumbra: 0px 11px 15px 1px #00000024,
    ambiant: 0px 4px 20px 3px #0000001f,
  ),
  12: (
    umbra: 0px 7px 8px -4px #00000034,
    penumbra: 0px 12px 17px 2px #00000024,
    ambiant: 0px 5px 22px 4px #0000001f,
  ),
  13: (
    umbra: 0px 7px 8px -4px #00000034,
    penumbra: 0px 13px 19px 2px #00000024,
    ambiant: 0px 5px 24px 4px #0000001f,
  ),
  14: (
    umbra: 0px 7px 9px -4px #00000034,
    penumbra: 0px 14px 21px 2px #00000024,
    ambiant: 0px 5px 26px 4px #0000001f,
  ),
  15: (
    umbra: 0px 8px 9px -5px #00000034,
    penumbra: 0px 15px 22px 2px #00000024,
    ambiant: 0px 6px 28px 5px #0000001f,
  ),
  16: (
    umbra: 0px 8px 10px -5px #00000034,
    penumbra: 0px 16px 24px 2px #00000024,
    ambiant: 0px 6px 30px 5px #0000001f,
  ),
  17: (
    umbra: 0px 8px 11px -5px #00000034,
    penumbra: 0px 17px 26px 2px #00000024,
    ambiant: 0px 6px 32px 5px #0000001f,
  ),
  18: (
    umbra: 0px 9px 11px -5px #00000034,
    penumbra: 0px 18px 28px 2px #00000024,
    ambiant: 0px 7px 34px 6px #0000001f,
  ),
  19: (
    umbra: 0px 9px 12px -6px #00000034,
    penumbra: 0px 19px 29px 2px #00000024,
    ambiant: 0px 7px 36px 6px #0000001f,
  ),
  20: (
    umbra: 0px 10px 13px -6px #00000034,
    penumbra: 0px 20px 31px 3px #00000024,
    ambiant: 0px 8px 38px 7px #0000001f,
  ),
  21: (
    umbra: 0px 10px 13px -6px #00000034,
    penumbra: 0px 21px 33px 3px #00000024,
    ambiant: 0px 8px 40px 7px #0000001f,
  ),
  22: (
    umbra: 0px 10px 14px -6px #00000034,
    penumbra: 0px 22px 35px 3px #00000024,
    ambiant: 0px 8px 42px 7px #0000001f,
  ),
  23: (
    umbra: 0px 11px 14px -7px #00000034,
    penumbra: 0px 23px 36px 3px #00000024,
    ambiant: 0px 9px 44px 8px #0000001f,
  ),
  24: (
    umbra: 0px 11px 15px -7px #00000034,
    penumbra: 0px 24px 38px 3px #00000024,
    ambiant: 0px 9px 46px 8px #0000001f,
  ),
) !default;

$shapes: (
  button: 4px,
  dropdown: 4px,
  textField: 4px,
) !default;

$typographies: (
  headline1: (
    typeface: (Roboto, sans-serif),
    font: 500,
    size: 30px,
    case: capitalize,
    line-height: 49px,
    letter-spacing: 0px,
  ),
  headline2: (
    typeface: (inbentaMontserrat, sans-serif),
    font: 100,
    size: 28px,
    case: capitalize,
    line-height: 45px,
    letter-spacing: 0px,
  ),
  headline3: (
    typeface: (inbentaMontserrat, sans-serif),
    font: 500,
    size: 22px,
    case: capitalize,
    line-height: 36px,
    letter-spacing: 0px,
  ),
  headline4: (
    typeface: (inbentaMontserrat, sans-serif),
    font: 100,
    size: 20px,
    case: capitalize,
    line-height: 32px,
    letter-spacing: 0px,
  ),
  headline5: (
    typeface: (inbentaMontserrat, sans-serif),
    font: 400,
    size: 15px,
    case: uppercase,
    line-height: 24px,
    letter-spacing: 0.3px,
  ),
  headline6: (
    typeface: (inbentaMontserrat, sans-serif),
    font: 400,
    size: 12px,
    case: uppercase,
    line-height: 19px,
    letter-spacing: 0.3px,
  ),
  subtitle1: (
    typeface: (inbentaOpenSans, sans-serif),
    font: 500,
    size: 14px,
    case: capitalize,
    line-height: 24px,
    letter-spacing: 0.4px,
  ),
  subtitle2: (
    typeface: (inbentaOpenSans, sans-serif),
    font: 500,
    size: 13px,
    case: capitalize,
    line-height: 22px,
    letter-spacing: 0.4px,
  ),
  body1: (
    typeface: Roboto,
    font: 400,
    size: 1em,
    case: normal,
    line-height: 1.8,
    letter-spacing: 0.4px,
  ),
  body2: (
    typeface: (inbentaOpenSans, sans-serif),
    font: 400,
    size: 13.5px,
    case: capitalize,
    line-height: 22px,
    letter-spacing: 0.48px,
  ),
  caption: (
    typeface: Roboto,
    font: 400,
    size: 0.750em,
    case: capitalize,
    line-height: 1.65,
    letter-spacing: 0.57px,
  ),
  button: (
    typeface: Roboto,
    font: 500,
    size: 0.875em,
    case: uppercase,
    line-height: 120%,
    letter-spacing: 1.25px,
  ),
  overline: (
    typeface: (inbentaOpenSans, sans-serif),
    font: 500,
    size: 14px,
    case: capitalize,
    line-height: 19px,
    letter-spacing: 0px,
  ),
  icon: (
    typeface: "Material Icons",
    font: 400,
    size: 1em,
    case: none,
    line-height: 99%,
  ),
) !default;