@import url('https://rsms.me/inter/inter.css');

@font-face {
    font-family: 'Nexa Bold';
    src: url(../fonts/nexa-bold.otf);
}
@font-face {
    font-family: 'Nexa Light';
    src: url(../fonts/nexa-light.otf);
}
@font-face {
    font-family: 'Font Awesome Solid';
    src: url('https://use.fontawesome.com/releases/v5.1.0/webfonts/fa-solid-900.woff2');
    font-weight: 900;
}

*, *:before, *:after {
    box-sizing: border-box;
    transition: all 0s var(--global-transition-timing-function);
    border-radius: 5px;
}

*[unselectable='on'], main, header {
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

:root {
    /* COLORS */

    /* Base settings */
    --theme-hue: 219;
    --color-sat: 91%;
    --gray-sat: 33%;

    /* Main colors */
    --theme-color:              hsl(var(--theme-hue), var(--color-sat), 62%);
    --theme-color-lighter:      hsl(var(--theme-hue), var(--color-sat), 90%);
    --theme-color-even-lighter: hsl(var(--theme-hue), var(--color-sat), 95%);
    --gray-97:                  hsl(var(--theme-hue), var(--gray-sat),  97%);
    --gray-95:                  hsl(var(--theme-hue), var(--gray-sat),  95%);
    --gray-93:                  hsl(var(--theme-hue), var(--gray-sat),  93%);
    --gray-90:                  hsl(var(--theme-hue), var(--gray-sat),  90%);
    --gray-85:                  hsl(var(--theme-hue), var(--gray-sat),  85%);
    --gray-80:                  hsl(var(--theme-hue), var(--gray-sat),  80%);
    --gray-75:                  hsl(var(--theme-hue), var(--gray-sat),  75%);
    --gray-70:                  hsl(var(--theme-hue), var(--gray-sat),  70%);
    --gray-65:                  hsl(var(--theme-hue), var(--gray-sat),  65%);
    --gray-60:                  hsl(var(--theme-hue), var(--gray-sat),  60%);
    --gray-55:                  hsl(var(--theme-hue), var(--gray-sat),  55%);
    --gray-50:                  hsl(var(--theme-hue), var(--gray-sat),  50%);
    --gray-45:                  hsl(var(--theme-hue), var(--gray-sat),  45%);
    --gray-40:                  hsl(var(--theme-hue), var(--gray-sat),  40%);
    --gray-35:                  hsl(var(--theme-hue), var(--gray-sat),  35%);
    --gray-30:                  hsl(var(--theme-hue), var(--gray-sat),  30%);
    --gray-25:                  hsl(var(--theme-hue), var(--gray-sat),  25%);
    --gray-20:                  hsl(var(--theme-hue), var(--gray-sat),  20%);
    --gray-15:                  hsl(var(--theme-hue), var(--gray-sat),  15%);
    --gray-10:                  hsl(var(--theme-hue), var(--gray-sat),  10%);
    --gray-5 :                  hsl(var(--theme-hue), var(--gray-sat),  5% );
    --gray-0 :                  hsl(var(--theme-hue), var(--gray-sat),  0% );

    /* Backwards compatibility */
    --background-color:                           var(--gray-97);
    --background-color-slightly-darker:           var(--gray-90);
    --background-color-more-slightly-darker:      var(--gray-75);
    --background-color-even-more-slightly-darker: var(--gray-60);
    --blackish-color-even-lighter:                var(--gray-45);
    --blackish-color-lighter:                     var(--gray-30);
    --blackish-color:                             var(--gray-15);
    --blackish-color-darker:                      var(--gray-5);
    --body-background-color:                      var(--background-color);

    /* Other colors */
    --unread-color:                               var(--theme-color);
    --flag-color:                                 hsl(37, 88%, 63%);
    --flag-color-darker:                          hsl(37, 88%, 40%); /* original var(--flag-color) but with 40% lightness */
    --important-color:                            hsl(347, 78%, 64%);
    --important-color-darker:                     hsl(347, 78%, 40%); /* original var(--important-color) but with 40% lightness */
    --important-color-lighter:                    hsl(347, 80%, 92%);
    --important-color-lighter-slightly-darker:    hsl(346, 79%, 87%);
    --pinned-color:                               hsl(57, 75%, 50%);
    --pinned-color-lighter:                       hsl(57, 75%, 85%);
    --pinned-color-darker:                        hsl(57, 75%, 30%);

    /* OTHER VARIABLES */
    
    --viewport-height: 100vh;
    --maximized-columns: 5;
    --minimized-columns: 0;
    --subtle-shadow: NONE;
    /* --subtle-shadow: 0 0 20px -5px rgba(0,0,0,0.1); */
    --side-margin: 18px;
    --sans-serif: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    --menu-width: calc(var(--side-margin) + 23.2rem);
    --top-highlight-height: 0px;
    --header-height: 4rem;
    --board-column-header-height: 4rem;
    --board-column-content-scrollbar-width: 0px;
    --global-transition-duration: .2s;
    --global-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    --global-transition: all var(--global-transition-duration) var(--global-transition-timing-function); /* easeInOutSine from easings.net */
    --main-padding-top: var(--side-margin);
    --main-padding-bottom: var(--side-margin);
    --max-column-height: calc(var(--viewport-height) - var(--header-height) - var(--main-padding-top) - var(--main-padding-bottom));
    --ios-app-top-offset: 44px;
    --ios-app-bottom-offset: 34px;
    --editor-max-width: 36rem;
    --email-viewer-sidebar-width: 22rem;
}

.hidden {
    display: none;
}

a {
    color: inherit;
}

input, textarea {
    font-family: inherit;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    background: none;
    border: none;
}

body {
    background-attachment: fixed;
    margin: 0;
    font-family: var(--sans-serif);
    color: var(--blackish-color);
    border-radius: 0;
}

/* Global shading types */
.type--white-button-bordered {
    transition-property: background-color;
    transition-duration: var(--global-transition-duration);

    color: var(--gray-30);
    background: white;
    border: 1px solid var(--gray-90);

    padding: 0.95rem;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
}
.type--white-button-bordered:hover {
    background: var(--gray-95);
}
.type--white-button-bordered:focus {
    outline: none;
    background: var(--gray-93);
}


.type--white-box-bordered {
    background: white;
    border: 1px solid var(--gray-90);
}
/* End global shading types */