@font-face {
      font-family: "Silka App";
      src: url("/dist/assets/fonts/silka/silka-regular-webfont.woff2") format("woff2"),
           url("/dist/assets/fonts/silka/silka-regular-webfont.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_2_0.woff2") format("woff2"),
           url("/fonts/2C5E16_2_0.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_0_0.woff2") format("woff2"),
           url("/fonts/2C5E16_0_0.woff") format("woff");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_1_0.woff2") format("woff2"),
           url("/fonts/2C5E16_1_0.woff") format("woff");
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --login-font-body: "Silka App", "Avenir Next", "Segoe UI", sans-serif;
      --login-font-heading: "Brandon Text", "Avenir Next Condensed", sans-serif;
      --shopapp-runtime-safe-top: 0px;
      --login-safe-area-top: env(safe-area-inset-top, 0px);
      --login-safe-area-right: env(safe-area-inset-right, 0px);
      --login-safe-area-bottom: env(safe-area-inset-bottom, 0px);
      --login-safe-area-left: env(safe-area-inset-left, 0px);

}

    html {
      height: -webkit-fill-available;
    }

    body,
    input,
    button {
      font-family: var(--login-font-body);
    }

    body {
      min-height: 100vh;
      min-height: 100dvh;
      min-height: -webkit-fill-available;
      background-color: var(--login-background);
      background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--login-background) 88%, white 12%), color-mix(in srgb, var(--login-background) 62%, black 38%)),
        var(--login-background-image);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    h1,
    h2,
    h3 {
      font-family: var(--login-font-heading);
      letter-spacing: -0.02em;
    }

    .shopapp-login-safe-shell {
      box-sizing: border-box;
      min-height: 100vh;
      min-height: 100dvh;
      min-height: -webkit-fill-available;
      padding-top: 2rem;
      padding-top: calc(2rem + var(--shopapp-runtime-safe-top, 0px));
      padding-right: 1.5rem;
      padding-right: calc(1.5rem + constant(safe-area-inset-right));
      padding-right: calc(1.5rem + env(safe-area-inset-right));
      padding-bottom: 2rem;
      padding-bottom: calc(2rem + constant(safe-area-inset-bottom));
      padding-bottom: calc(2rem + env(safe-area-inset-bottom));
      padding-left: 1.5rem;
      padding-left: calc(1.5rem + constant(safe-area-inset-left));
      padding-left: calc(1.5rem + env(safe-area-inset-left));
    }