/*
  Global App CSS
  ----------------------
  Use this file for styles that should be applied to all components.
  For example, "font-family" within the "body" selector is a CSS property
  most apps will want applied to all components.

  Any global CSS variables should also be applied here.
*/
@import url('https://use.typekit.net/nqz4gbi.css');

@font-face {
    font-family: 'Bayshore';
    src: url('https://cdn.shopify.com/s/files/1/1091/0010/t/4/assets/Bayshore.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: #faaf9f;
    --color-black: #232129;
    --color-light-grey: #f3efee;
    --color-grey: #e6e6e6;
    --color-dark-grey: #4d4d4d;
    --color-grape: #a47a82;
    --color-dark-grape: #845a62;

    --font-family-secondary: 'Bayshore', 'sans-serif';
    --app-height: 100%;
    --sidebar-width: 0px;

    /* Breakpoints */
    --break-sm: 576px;
    --break-md: 768px;
    --break-lg: 992px;
    --break-xl: 1200px;
    --break-xxl: 1400px;

    --container-width: 900px;
    --container-padding: 15px;

    /* Button */

    /* Text */

    --font-size-heading-h1: 2rem;
    --font-size-heading-h2: 1.8rem;
    --font-size-heading-h3: 1.6rem;
    --font-size-heading-h4: 1.4rem;
    --font-size-heading-h5: 1.2rem;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'brandon-grotesque', 'sans-serif';
    margin: 0;
    overflow: hidden;
}

button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--color-black);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    touch-action: manipulation;
}

@media screen and (min-width: 1200px) {
    :root {
        --sidebar-width: 350px;
    }
}